当前位置: 首页 > 编程笔记 >

详解js动态获取浏览器或页面等容器的宽高

海新霁
2023-03-14
本文向大家介绍详解js动态获取浏览器或页面等容器的宽高,包括了详解js动态获取浏览器或页面等容器的宽高的使用技巧和注意事项,需要的朋友参考一下

首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些:

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

 接着我们结合实例来实际说明一下:

有时候我们写了100%高度的时候,然后因为是当前页面的子页面,100%的只是父页面,而子页面有下拉条还有内容的话,一些东西就不能都获取到。

如下图:

(我们设置了这个div id为“bg”的高度为100%,但下拉条内容拉下去的时候,还是会发现这个背景高度只是父页面的100%,里面子容器的内容都没有被这个黑色背景覆盖到。)

所以在这种时候我们就要开始考虑给这个“bg”设置对应的动态高度。

在js中的初始化方法里写如下代码

//定义id为bg的高度随内容而变化
  var winHeight=0;
  winHeight=document.body.scrollHeight;
  document.getElementById("bg").style.height=winHeight+"px";
  
}

然后我们再来看效果:

 好了,这样整个页面都可以被渲染到了。

以上所述是小编给大家介绍的js动态获取浏览器或页面等容器的宽高详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 我是JavaFX的新手,我正在编写一个简单的登录应用程序,我想在我的web浏览器中启动它。 我如何获得web浏览器的宽度和高度?是否有一些对象用于此目的,或一个方法,我希望能够调整应用程序的大小,每当浏览器的大小改变。

  • 本文向大家介绍获取浏览器当前页面的滚动条高度的兼容写法相关面试题,主要包含被问及获取浏览器当前页面的滚动条高度的兼容写法时的应答技巧和注意事项,需要的朋友参考一下 document.documentElement.scrollTop || document.body.scrollTop;

  • 本文向大家介绍兼容浏览器的js事件绑定函数(详解),包括了兼容浏览器的js事件绑定函数(详解)的使用技巧和注意事项,需要的朋友参考一下 因为javascript中所有对象都集成与Object,那么只有给Object原型添加一个事件绑定函数,就不需要在处理绑定事件的时候,每次写一长串代码,直接调用即可。在代码中添加红色部分代码,直接便可以在代码中直接调用 以上这篇兼容浏览器的js事件绑定函数(详解)

  • 我试图在一些servlet和jsp之间添加一个过滤器,以便在显示jsp之前登录的用户。问题是,我试图检索浏览器的网址,这是转发到登录页面,但我找不到如何。我尝试在过滤器中获取URI,并将其作为请求的属性发送给Connexion servlet,但是,它不起作用。

  • 我想获得由Selenium启动的浏览器的PID。有什么办法能搞定吗?

  • 浏览器兼容 主流浏览器都兼容 HTML5 的新标签,对于 IE8 及以下版本不认识 HTML5的新元素,可以使用 JavaScript 创建一个没用的元素来解决,例如: <script> document.createElement("header"); </script> 也可以使用 shiv 来解决兼容性问题,详情可参考 HTML5 Shiv