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

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

2019年02月02日  | 移动技术网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";
    
}

然后我们再来看效果:

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

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

相关文章:

验证码:
移动技术网