offsetHeight、clientHeight、scrollHeight 等详解

先给一个初始版吧,后期有新的发现在修改补充:


浏览器


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 ( 11)


H+S+P+B


H+P-S


H+P+M+Pt(own)


Chrome


H+S+P+B


H+P-S


H+P+M+Pt(own)


FireFox


H+S+P+B


H+P-S


H+P+M+Pt(own)

说明:

* H(height) | S(scrollBar) | P(padding) | B(border) | M(margin)

* (own) 表示DOM对象自身。

* offsetHeight:DOM对象实际高度。

* clientHeight:DOM对象内容的高度(间距也算是内容)。

* scrollHeight:获得滚动内容的高度。

但在IE中,这个滚动的内容,还会加上DOM元素自身的间距,并且还有因为滚动内容是否为空,或者是滚动内容高度小于DOM对象自身的高度从而在IE的各个版本中都会有所不同,下面是具体的说明:

------------------------------------------

IE 7- 以下:

DOM对象自身的总高度 = H+P

IE8+、Chrome、Firefox 中:

DOM对象自身的总高度 = H+P-S

------------------------------------------

内容总高度 = H+P+M

ie6 中的区别:

如果内容总高度小于19px或者DOM对象内部为空,那么scrollHeight的值为19,这是因为在IE6中,元素的最小高度是19px;

如果DOM对象内部有一个空的没有任何内容与样式的元素,那么scrollHeight的值,就是DOM对象本身的高度+间距。

Ie7中的区别:

如果内容总高度小于19px或者DOM对象内部为空,那么scrollHeight的值为19,这是因为在IE6中,元素的最小高度是19px;

IE8+、Chrome、Firefox:中的区别:

如果DOM对象的内容为空,或者是内容的高度小于DOM对象自身的高度,那么scrollHeight的值便是DOM对象自身的总高度 。

如果内容的总高度大于DOM对象自身的总高度,那么scrollHeight的值,则是 DOM对象内容的总高度 + DOM对象的上间距。

最后补充一点的是以上说的offsetHeight、clientHeight、scrollHeight也适应于offsetWidth、clinetWidth、scrollWidth。

时间: 2024-10-08 20:54:41

offsetHeight、clientHeight、scrollHeight 等详解的相关文章

关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var node1 = document.querySelector('#father'); var node2 = document.querySelector('#child'); console.log('offsetTop==offsetHeight==scrollTop==scrollHeight==cli

彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight

测试用例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&quo

主流浏览器下下offsetHeight\clientHeight\scrollHeight以及window的innerHeight\outHeight等的关系

1.Firefox32.03 body clientHeight:body.padding+ body.height(css设置或内容撑的,以设置的优先); offsetHeight:body.padding+ body.height(css设置或内容撑的,以设置的优先)+body.border; scrollHeight:body.padding+ body.height(css设置或内容撑的,谁大谁优先); documentElement clientHeight= window.inner

offsetheight、scrollheight以及clientheight的区别

offsetHeight和offsetTop等属性用法详解:标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中.但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度.下面就介绍一下相关属性的用法.先来看一张比较经典的示意图:<ignore_js_op> 下面结合各上图介绍一下各个属性的作用:一.offsetTop属性:此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离.所谓的定

详解clientHeight、offsetHeight、scrollHeight

关于clientHeight.offsetHeight.scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值) window.screen.height 返回当前屏幕高度(分辨率值) window.document.body.offsetHeight; 返回当前网页高度 window.docume

height clientHeight scrollHeight offsetHeight的大致区别

这主要是针对火狐浏览器来讲的: height:就是div的高度: clientHeight:一般情况下和height是一样的,如果div有滚动条,那么clientHeight = height - 滚动条的高度: var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight || document.body.clientH

offsetHeight, clientHeight与scrollHeight的区别

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

clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案

clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三个属性: clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高度) offsetHeight: 偏移量,包含元素在屏幕上所用的所有可见空间(包括所有的内

height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别

1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当  box-sizing: content-box 时,高度应用到元素的内容框. 当  box-sizing:border-box时,高度包含了内容框.内边距和边框. 2.clientHeight Element.clientHeight只读属性是没有的CSS或内联布局框元素为零,否则它的像素单元内的高度,但不包括填充水平滚动条的高度,边界或边缘. // 包含元素的conten