当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 详解js动态获取浏览器或页面等容器的宽高

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

2019年05月28日  | 移动技术网IT编程  | 我要评论

首先说一下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动态获取浏览器或页面等容器的宽高详解整合,希望对大家有所帮助

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网