四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异...

转自http://blog.163.com/chudaozhe@126/blog/static/1157323432011626112137928/

网页可见区域宽：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

这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

clientHeight
四种浏览器对 clientHeight 的解释都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

转载于:https://www.cnblogs.com/KaPengQiang/articles/2419033.html

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异...相关推荐

[Z]四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释...
http://wenku.baidu.com/view/bc862eea6294dd88d0d26b52.html### 转载于:https://www.cnblogs.com/waytofall/p ...
clientHeight offsetHeight scrollHeight offsetTop scrollTop
文章目录各属性详解实现 offsetParent.offsetLeft/offsetTop深度剖析 element.offsetParent 定义祖先元素中不存在定位元素 webkit内核.Fi ...
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释 scrollHeight: 获取对象的滚动高度. scroll ...
JS中clientWidth offsetWidth innerWidth scrollWidth等区分
由于前端经常会遇到计算位置的问题,那么搞懂clientWidth,offsetWidth,scrollHeight等等这些就变得尤为重要.放上经典图,一张图让你搞懂clientWidth,offset ...
clientHeight,offsetHeight,scrollHeight迷一样的三个值
https://blog.csdn.net/qq_39083004/article/details/78498178 https://www.imooc.com/article/17571 推荐 o ...
clientHeight.offsetHeight.scrollHeight等的区别
查看了博文http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html 然后自己写一下加深印象. clientHeight:可见高度 ...
电脑浏览器换IP怎么换？四种浏览器教程一起看看吧。【芝麻http】
浏览器设置代理IP上网是代理IP最基础的使用方法,不同的浏览器设置代理IP的方法略有不同,下面就几种常用的浏览器如何设置代理IP进行说明. 一.IE浏览器设置代理IP IE浏览器无疑是最常用的浏览器, ...
offsetHeight, clientHeight与scrollHeight的区别
[size=xx-large][color=indigo]offsetHeight, clientHeight与scrollHeight的区别[/color][/size] [size=large][ ...
JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.b ...

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异...

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异...相关推荐

最新文章

热门文章