offsetHeight, clientHeight与scrollHeight的区别

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

大家好,又见面了,我是你们的朋友全栈君。

在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论以下结论皆是在标准模式下测试通过的,没有测试quirk模式。

clientHeight

大部分浏览器对 clientHeight 都没有什么异议,认为是元素可视区域的高度,也就是说元素或窗口中可以看到内容的这个区域的高度,即然是指可看到内容的区域,滚动条不算在内。但要注意padding是算在内。其计算方式为clientHeight = topPadding + bottomPadding+ height – 水平滚动条高度。

offsetHeight

在IE6,IE7,IE8, IE9以及最新的的FF, Chrome中,对于一般元素,都是offsetHeight = padding + height + border = clientHeight + 滚动条 + 边框。

scrollHeight

scrollHeight的争议比较大,有些浏览器认为scrollHeight可以小于clientHeight,有些认为scrollHeight至少应该等于clientHeight。但有一点是一样的,就是scrollHeight >= topPadding + bottomPadding + 内容margin box的高度。

在浏览器中的区别在于:

IE6、IE7 认为scrollHeight 是内容高度,可以小于clientHeight。

FF 认为scrollHeight 是内容高度,不过最小值是clientHeight。

注: 以上都是对于一般元素而方言的,body和documentElement的clientHeight, offsetHeight和scrollHeight在各个浏览器中的计算方式又不同。

在所有的浏览器中,如果你想获取视窗可见部分的高度,应该使用documentElement.clientHeight,因为body.clientHeight是由它的内容决定的。

FF30

注意:Firefox30中,水平滚动条的宽度是17个像素。

body

offsetHeight = body.padding + body.border + body.height(CSS设置或内容撑的);

clientHeight = body.padding + body.height(CSS设置或内容撑的);

scrollHeight >= clientHeight;

documentElement

offsetHeight = body.offsetHeight + body.margin;

clientHeight = window窗口可见高度;

scrollHeight >= clientHeight

因此,只是获取窗口可见高度,在FF中得用documentElement.clientHeight,获取整个页面的高度,则应该用documentElement.scrollHeight

元素

offsetHeight = padding +border + height;

clientHeight = padding +height -水平滚动条的高度。

scrollHeight >=clientHeight

总结:从body, documentElement, 元素的结果分析,FireFox认为scrollHeight的最小高度是clientHeight。

offsetLeft = 元素border左上角到window视窗原点的距离 或 到offsetParent的border box顶部的距离。

Chrome 39

注意:Chrome39中,水平滚动条的宽度是17个像素。

body

offsetHeight = body.padding+ body.border + body.height(CSS设置或内容撑大);

clientHeight= body.pdding + body.height(CSS设置或内容撑大);

scrollHeight >= offsetHeight; 并且scrollHeight >= window窗口可见高度;

如果body没有内容(空的):

body.offsetHeight == documentElement.offsetHeight;

body.clientHeight ==documentElement.clientHeight;

body.scrollHeight ==documentElement.scrollHeight;

而且以上属性的值都是浏览器的视窗高度。

documentElement

offsetHeight = scrollHeight = body.offsetHeight+ body.margin;

clientHeight = window视窗可见高度;

如果body内容过短,则documentElement的offsetHeight和scrollHeight将比clientHeight小。

因此,只是获取页面窗口可视部分高度,在Chrome中用documentElement.clientHeight;获取整个页面内容最大高度(如果比窗口小,取窗口的高度),则应该用body.scrollHeight;获取页面内容的实际高度,应该使用body.offsetHeight()。

元素

offsetHeight = padding + border + height;

clientHeight = padding + height -水平滚动条的高度;

scrollHeight >= clientHeight;

offsetLeft = 元素border左上角到画布原点的距离 或 到offsetParent的border box顶部的距离。

IE9

注意:IE9中,滚动条的宽度是17个像素。

body

offsetHeight = body.padding +body.border + body.height(CSS设置或内容撑大);

clientHeight =  body.padding + body.height(CSS设置或内容撑大);

scrollHeight >= clientHeight;

documentElement

offsetHeight = clientHeight + 水平滚动条的高度;

clientHeight = window窗口可见高度

scrollHeight >= clientHeight并且scrollHeight >= body.offsetHeight

因此,只是获取window窗口可见高度,在IE9中得用documentElement.clientHeight,获取整个页面内容的高度,则应该用documentElement.scrollHeight。

元素

offsetHeight = padding +border + height。

clientHeight = padding +height – 滚动条的宽度。

scrollHeight >=clientHeight;

总结:从body, documentElement, 元素的结果分析,IE9认为scrollHeight的最小高度是clientHeight。

从结果分析,IE9认为scrollHeight的最小高度是clientHeight。

IE8

注意:IE8中,滚动条的宽度是17个像素。

body

offsetHeight = body.padding +body.border + body.height(CSS设置或内容撑大);

clientHeight =  body.padding + body.height(CSS设置或内容撑大);

scrollHeight >= clientHeight;

documentElement

offsetHeight = clientHeight + 水平滚动条的高度 + body.border

clientHeight = window窗口可见高度

scrollHeight >= clientHeight并且scrollHeight >= body.offsetHeight

因此,只是获取窗口可见高度,在IE8中得用documentElement.clientHeight,获取整个页面内容高度,则应该用documentElement.scrollHeight。

元素上

offsetHeight = padding +border + height

clientHeight = padding +height – 水平滚动条高度。

scrollHeight >=clientHeight

从结果分析,IE8认为scrollHeight的最小高度是clientHeight。

offsetLeft = 元素border左上角到画布原点的距离 或 到offsetParent的border box顶部的距离。

IE7

注意:IE7中,滚动条的宽度是17个像素。

body

offsetHeight = body.padding + body.border+ body.height(CSS设置或内容撑大);

clientHeight = body.height +body.padding – 水平滚动条高度;

scrollHeight =  内容margin box的高度;

documentElement

offsetHeight = clientHeight =window视窗可见高度;

scrollHeight = body.offsetHeight+ body.margin;

因此,只是获取窗口可见部分高度,在IE7中得用documentElement.clientHeight,获取整个页面内容的大小,则用documentElement.scrollHeight。

元素

offsetHeight = padding +border + height。

clientHeight = padding +height – scrollbar.width。

scrollHeight = padding + 内容margin box的高度

从结果分析,IE7认为scrollHeight 可以小于clientHeight。

offsetLeft = 元素border box左上角到父容器(不是offsetParent)的border box左上角的距离。

IE6

body

offsetHeight = body.padding +内容margin box的高度。

clientHeight = scrollHeight

documentElement

offsetHeight=画布高度,但offsetHeight>= clientHeight

clientHeight = window窗口可见高度。

scrollHeight = 内容的高度

因此,只是获取页面窗口的大小,在IE6中得用documentElement.clientHeight,获取整个页面内容的大小,则应该用documentElement.offsetHeight。

元素

offsetHeight = padding +border + height。

clientHeight = padding +height – scrollbar.width。

scrollHeight = padding + 内容margin box的高度

从结果分析,IE6认为scrollHeight 可以小于clientHeight。

offsetLeft = 元素border box左上角到父容器(不是offsetParent)的border box左上角的距离。

结论

l  IE6、IE7认为scrollHeight可以小于clientHeight;

l  IE8、IE9和Firefox认为scrollHeight>=clientHeight;

l  取窗口可见部分高度,统一用documentElement.clientHeight即可;

l 取页面内容的高度(如果内容高度比窗口高度小,取窗口高度),则用documentElement.scrollHeight,只有Chrome需要使用body.scrollHeight。

同理

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

/**
 * Figure out if current document is in quirks mode.
 * @param a: document object
 */
function isQuirksMode(doc) {
	// In IE6,IE7,IE8,IE9,IE10 Firefox and Chrome browsers, document.compatMode has two values: "BackCompat", "CSS1Compat".
	return doc.compatMode && doc.compatMode.indexOf("CSS") != -1;
}

/**
 * Get the visible height of the whole document or window.
 */
function getDocumentClientHeight(doc) {
	// in IE quirks mode, documentElement.clientHeight == 0
	return isQuirksMode(a) ? doc.body.clientHeight : doc.documentElement.clientHeight;
}

/**
 * Get the page height, if content's height is smaller than window's height, use window's height.
 */
function getPageHeight(doc) {
	// for IE and Firefox, use documentElement.scrollHeight, Chrome use body.scrollHeight.
	return Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight);
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163740.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 根据经纬度计算两点之间的距离的公式是_知道两点经纬度求距离

    根据经纬度计算两点之间的距离的公式是_知道两点经纬度求距离//距离单位米publicstaticdoublealgorithm(doublelongitude1,doublelatitude1,doublelongitude2,doublelatitude2){doubleLat1=rad(latitude1);//纬度doubleLat2=rad(latitude2);doublea=Lat1-Lat2;//…

  • CPLD与FPGA的区别

    CPLD与FPGA的区别FPGA和CPLD是两种著名的数字逻辑芯片。当涉及到内部架构时,这两种芯片显然是不同的。FPGA:现场可编程门阵列,是一种可编程逻辑芯片。它是一个伟大的芯片,因为它可以被编程去做几乎任何一种数字功能。FPGA的架构允许芯片具有很高的逻辑容量。它被用于设计要求很高的门数和它们的延迟是相当不可预测的,因为它的结构。FPGA被认为是“细粒”,因为它包含了很多可以达到10万的微小逻辑块。这是人组合逻辑和记…

  • ExecuteNonQuery()_sql存储过程返回值

    ExecuteNonQuery()_sql存储过程返回值本文实例讲述了C#中ExecuteNonQuery()返回值注意点。对于C#数据库程序设计有一定的借鉴价值。分享给大家供大家参考之用。具体分析如下:首先,在查询某个表中是否有数据的时候,我们通常用ExecuteNonQuery(),并通过判断值是否大于0来判断数据的存在与否。结果与我所设想的很不一致,调试时才发现,其执行后返回的结果是-1,对此我很是不理解,回头查了下资料,如下显示:SqlComm…

  • 5.6(java学习笔记) queue

    5.6(java学习笔记) queue

  • 2021微信小程序反编译(小程序反编译工具)

    该网站是小程序反编译社区,永久免费开放下载所有反编译的小程序https://unpack.marchccc.top/

  • 什么是宽字节注入_innodb_buffer_pool_size

    什么是宽字节注入_innodb_buffer_pool_size宽字节注入产生的原理宽字节注⼊源于程序员设置MySQL连接时错误配置为:setcharacter_set_client=gbk,这样配置会引发编码转换从⽽导致的注⼊漏洞。具体原理如下:1,正常情况下当GPC开启或使⽤addslashes函数过滤GET或POST提交的参数时,⿊客使⽤的单引号’就会被转义为:’;2,但如果存在宽字节注⼊,我们输⼊%df%27时⾸先经过上⾯提到的单引号转义变成了%…

    2022年10月14日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号