主流浏览器下下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.innerHeight -scrollbar.width。

offsetHeight= body.padding+ body.height(css设置或内容撑的,以设置的优先)+body.border + body.margin。

scrollHeight=body.padding+ body.height(css设置或内容撑的,谁大谁优先)+body.border + body.margin,但最小值是documentElement.clientHeight。

说明:

a、设置的优先指的是如果有明确设置body的高度则忽略内容高度

b、可以针对上面的六项属性中的每一项可以依次从下面的三组数据中进行对比来证明

设置的body以及内部元素的样式数据为

<style>

html,body,div{

margin:0;

padding:0;

border:none;

}

</style>

第一组数据

<body style="border:1px solid; height:100px;padding-top:10px;margin-top:50px;">

<div style="height:1000px; width:800px;"></div>

</body>

结果为:

window.screen.height:614

window.outerHeight:460

window.innerHeight:336

body scrollHeight:1010

body offsetHeight:112

body clientHeight:110

documentElment scrollHeight:1061

documentElment offsetHeight:162

documentElment clientHeight:319

第二组数据:

<body style="border:1px solid; height:100px;padding:10px;margin:50px;">

<div style="height:1000px; width:800px;"></div>

</body>

结果为:

window.screen.height:614

window.outerHeight:460

window.innerHeight:336

body scrollHeight:1010

body offsetHeight:122

body clientHeight:120

documentElment scrollHeight:1061

documentElment offsetHeight:222

documentElment clientHeight:319

第三组数据:

<body style="border:1px solid; height:1000px;padding-top:10px;margin-top:50px;">

<div style="height:100px; width:800px;"></div>

</body>

window.screen.height:614

window.outerHeight:460

window.innerHeight:336

body scrollHeight:1010

body offsetHeight:1012

body clientHeight:1010

documentElment scrollHeight:1062

documentElment offsetHeight:1062

documentElment clientHeight:319

2、chrome36.0.1985.125

body

clientHeight= body.padding + body.height(css设置或内容撑大,设置优先);

offsetHeight =body.padding + body.height(css设置或内容撑大,设置优先)+ body.border;

scrollHeight=body.padding+ body.height(css设置或内容撑的,谁大谁优先)+body.border+body.margin。

documentElement

clientHeight= window.innerHeight。

offsetHeight  = body.padding + body.height(css设置或内容撑大,设置优先)+ body.border+ body.margin;

scrollHeight  =body.padding+ body.height(css设置或内容撑的,谁大谁优先)+body.border + body.margin,但最小值是documentElement.offsetHeight。

第一组数据:

<body style="border:1px solid;height:100px;padding-top:10px;margin-top:50px;">

<div style="height:1000px; width:800px;"></div>

</body>

window.screen.height:768

window.outerHeight:734

window.innerHeight:619

body scrollHeight:1061

body offsetHeight:112

body clientHeight:110

documentElment scrollHeight:1061

documentElment offsetHeight:162

documentElment clientHeight:619

第二组数据:

<body style="border:1px solid; height:100px;padding:10px;margin:50px;">

<div style="height:1000px; width:800px;"></div>

</body>

window.screen.height:768

window.outerHeight:734

window.innerHeight:619

body scrollHeight:1061

body offsetHeight:122

body clientHeight:120

documentElment scrollHeight:1061

documentElment offsetHeight:222

documentElment clientHeight:619

第三组数据:

<body style="border:1px solid; height:1000px;padding-top:10px;margin-top:50px;">

<div style="height:100px; width:800px;"></div>

</body>

window.screen.height:768

window.outerHeight:734

window.innerHeight:619

body scrollHeight:1062

body offsetHeight:1012

body clientHeight:1010

documentElment scrollHeight:1062

documentElment offsetHeight:1062

documentElment clientHeight:619

3、IE11

body

clientHeight= body.padding + body.height(css设置或内容撑大,设置优先)

offsetHeight = body.padding + body.height(css设置或内容撑大,设置优先)+ body.border

scrollHeight =body.padding + body.height(css设置或内容撑大,谁大谁优先),但最小值是clientHeight。

documentElement

clientHeight =window.innerHeight-scrollbar.height

offsetHeight = body.padding + body.height(css设置或内容撑大,设置优先)+ body.border+body.margin

scrollHeight=body.padding + body.height(css设置或内容撑大,谁大谁优先)+ body.border+body.margin,但最小值是body.offsetHeight+ margin。

第一组数据:

<body style="border:1px solid;height:100px;padding-top:10px;margin-top:50px;">

<div style="height:1000px; width:800px;"></div>

</body>

window.screen.height:614

window.outerHeight:448

window.innerHeight:364

body scrollHeight:1010

body offsetHeight:112

body clientHeight:110

documentElment scrollHeight:1061

documentElment offsetHeight:162

documentElment clientHeight:347

第二组数据:

<body style="border:1px solid; height:100px;padding:10px;margin:50px;">

<div style="height:1000px; width:800px;"></div>

</body>

window.screen.height:614

window.outerHeight:448

window.innerHeight:364

body scrollHeight:1010

body offsetHeight:122

body clientHeight:120

documentElment scrollHeight:1061

documentElment offsetHeight:222

documentElment clientHeight:347

第三组数据:

<body style="border:1px solid; height:1000px;padding-top:10px;margin-top:50px;">

<div style="height:100px; width:800px;"></div>

</body>

window.screen.height:614

window.outerHeight:448

window.innerHeight:364

body scrollHeight:1010

body offsetHeight:1012

body clientHeight:1010

documentElment scrollHeight:1062

documentElment offsetHeight:1062

documentElment clientHeight:347

时间: 2024-10-02 08:57:20

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

关于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

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

offsetHeight, clientHeight与scrollHeight的区别

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

详解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

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

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

搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight

先搞offsetTop,最难懂的就是它了 官方解释:返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位.这真TM坑爹啊!有木有!经过仔细研究查找得出结论:offsetTop是相对于离它最近的具有绝对或相对定位的父级元素的距离,有点绕口是不是?别急,咱慢慢剥开它...首先一定要明白offsetTop是一个相对值,那它到底是相对于谁的值呢,现在的女明星不都流行找干爹嘛,offsetTop也给自己找了一个,别人的要求是要有钱有权,而它的要求是要有position(只能是relative和

offsetTop/offsetHeight scrollTop/scrollHeight 的区别

offsetTop/offsetHeight   scrollTop/scrollHeight  这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offsetTop   obj距离上方或上层控件的位置,整型,单位像素. obj.offsetHeight   obj自身的高度,整型,单位像素. offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是: 一.offsetTop 返回的是数字,而 st