clientwidth（clientWidth、offsetWidth、clientHeight、offsetHeight 高手详细解释！）

本文目录

• clientWidth、offsetWidth、clientHeight、offsetHeight 高手详细解释！
• clientWidth等指的是什么

clientWidth、offsetWidth、clientHeight、offsetHeight 高手详细解释！

四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异网页可见区域宽：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 的解释都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。offsetHeightIE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。scrollHeightIE、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 的解释与上面相同，只是把高度换成宽度即可。注：以上也是转的，对自己有点参考而已，有些值要跟据页面方式而定！我用的Ajax就完全没法用上面的方法定高！javaScript窗口属性：网页可见区域宽：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在IE、FireFox、Opera下都可以使用document.body.clientWidthdocument.body.clientHeight即可获得，很简单，很方便。而在公司项目当中：Opera仍然使用document.body.clientWidthdocument.body.clientHeight可是IE和FireFox则使用document.documentElement.clientWidthdocument.documentElement.clientHeight原来是W3C的标准在作怪啊http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"》如果在页面中添加这行标记的话在IE中：document.body.clientWidth ==》 BODY对象宽度document.body.clientHeight ==》 BODY对象高度document.documentElement.clientWidth ==》 可见区域宽度document.documentElement.clientHeight ==》 可见区域高度注：在IE中“可见区域”基本不认可body，而必需使用documentElement！！！！在FireFox中：document.body.clientWidth ==》 BODY对象宽度document.body.clientHeight ==》 BODY对象高度document.documentElement.clientWidth ==》 可见区域宽度document.documentElement.clientHeight ==》 可见区域高度在Opera中： document.body.clientWidth ==》 可见区域宽度document.body.clientHeight ==》 可见区域高度document.documentElement.clientWidth ==》 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==》 页面对象高度（即BODY对象高度加上Margin高）获取窗口高宽：var w= document.documentElement.offsetWidth;var h=document.documentElement.offsetHeight;

clientWidth等指的是什么

scrollWidth是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）clientWidth是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。offsetWidth是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。scrollHeight: 获取对象的滚动高度。offsetHeight:获取对象相对于版面或由父坐标scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离offsetLeft:获取对象相对于版面或由scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离offsetTop 属性指定的父坐标的计算顶端位置offsetParent 属性指定的父坐标的高度offsetParent 属性指定的父坐标的计算左侧位置event.clientX 相对文档的水平座标event.clientY 相对文档的垂直座标event.offsetX 相对容器的水平坐标event.offsetY 相对容器的垂直坐标document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 　　以上主要指IE之中，FireFox差异如下：IE6.0、FF1.06+：clientWidth = width + padding clientHeight = height + paddingoffsetWidth = width + padding + borderoffsetHeight = height + padding + borderIE5.0/5.5：clientWidth = width - borderclientHeight = height - border