offsetHeight/Width clientHeight/Width scrollHeight/Width等高宽算法

先给一个初始版吧,后期有新的发现在修改补充: 浏览器 offsetHeight clientHeight scrollHeight IE(6) H+S+P+B H+P-S H+P+M+P(own) IE ( 7 ) H+S+P+B H+P-S H+P+M+P(own) IE ( 8 ) H+S+P+B H+P-S H+P+M+Pt(own) IE ( 9 ) H+S+P+B H+P-S H+P+M+Pt(own) IE ( 10) H+S+P+B H+P-S H+P+M+Pt(own) IE (

offsetHeight是包含contentHeight+padding+borderHeight+ScrollBarHeight的 clientHeight仅包含contentHeight+padding,不含borderHeight+ScrollBarHeight的 换句话就是外内问题. 打个比喻你买手机,卖家是给你配个盒子的,你用的时候不用盒子,但你要把存起来,最后还是放到盒子里,所占用的空间不仅包含手机,更要看盒子的宽度,至于margin那是盒子与盒子之间的距离. 再打个比喻,你书架上放

今天再次遇到了offset***.client***.scroll***的这三类属性的问题,总是混淆,现归纳总结如下: 大体上来说可以这样理解: client***属性(clientWidth.clientHeight): 表示元素可以看到内容的可见区域部分,一般是最后一个对象条以下到状况栏以上的这个区域,与页面内容无关.且它会直接返回属性的数值大小,可直接进行计算.分开说的话也可以这样理解:若元素大小小于父元素,大小包括padding.content部分,不包括border:若元素大小大于父元

lientHeight 大部分浏览器对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,即然是指可看到内容的区域,滚动条不算在内.但要注意padding是算在内.其计算方式为clientHeight = topPadding + bottomPadding+ height - scrollbar.height. offsetHeight在IE6,IE7,IE8以及最新的的FF, Chrome中,在元素上都是offsetHei

clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高度) offsetHeight: 偏移量,包含元素在屏幕上所用的所有可见空间(包括所有的内边距滚动条和边框大小,不包括外边距 window.screen.height:屏幕分辨率高document.body.scrollTop:网页被卷去的高 1.clientHeight clientheight=

style.height 包括元素的滚动条,不包括边框 clientHeight 不包括元素的滚动条和边框 offsetHeight 包括元素的滚动条和边框 scrollHeight offsetHeight+scrollTop 小贴士: 在IE下,创建一个oLi <style> li{/*不设置li的高度*/} </style> <script> var oLi = document.createElement('li'); oLi.innerHTML='我是li的内

clientHeight = visible height + padding offsetHeight = clientHeight + border + scrollbar scrollHeight = clientHeight + non-visible height

在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHeight 都没有什么异议,认为是元素可视区域的高度,也就是说元素或窗口中可以看到内容的这个区域的高度,即然是指可看到内容的区域,滚动条不算在内.但要注意padding是算在内.其计算方式为clientHeight = topPadding + bottomPadding+ height - 水平滚动条高

1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 复制代码 代码如下: <div style="background-color:red; position:absolute; width:100px; height:100px;"> <p style=" position:absolute; top:-5px;">测试top</p> </div> 上面是一个段落P包含