如何使用js动态获取浏览器或页面等容器的宽高
导读:本文共1506字符,通常情况下阅读需要5分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些:网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight... ...
目录
(为您整理了一些要点),点击可以直达。首先说一下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的高度随内容而变化varwinHeight=0;winHeight=document.body.scrollHeight;document.getElementById("bg").style.height=winHeight+"px";}
然后我们再来看效果:
好了,这样整个页面都可以被渲染到了。
JavaScript的作用是什么
1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies,包括创建和修改等。7、基于Node.js技术进行服务器端编程。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
如何使用js动态获取浏览器或页面等容器的宽高的详细内容,希望对您有所帮助,信息来源于网络。