DOM元素中height, clientHeight,offsetHeight等，到底是什么？

<div  style="height:200px;padding:10px;border:1px solid green;"></div>

对于上面的div，它的border的height有多高？答案是200+10*2+1*2=222。

直接上结论：
在style或css样式中的 height:200px  指的是内容可视区的高度，不含内边距，不含border，不含外边距，而不是div的高度。

以下结论在 firefox、chrome、IE10+、QQ浏览器中都测试过，都是一致的：

clientHeight: 可理解为内部可视区高度，样式的height+上下padding(本例即220）。

scrollHeight: 内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）

offsetHeight:可理解为div的可视高度，样式的height+上下padding+上下border-width。（本例是222）

height 这个变量在几个浏览器中都是undefined

style.height这个变量在本例中是‘200px‘，不过遗憾的是只有将高度定义在元素的style属性中这个变量才有效，如果是抽取到了样式表中是无法取到的。

clientTop: 容器内部相对于容器本身的top偏移，实际就是 上border-width （本例是1）

scrollTop: Y轴的滚动条没有，或滚到最上时，是0；y轴的滚动条滚到最下时是 scrollHeight-clientHeight（很好理解）

offsetTop: 可以理解为容器相对于document的top的绝对偏移。等于top+margin-top

时间： 2024-10-17 20:13:25

DOM元素中height, clientHeight,offsetHeight等，到底是什么？的相关文章

JQueryUI-拖动（Draggable）-在DOM 元素中约束运动

定义和用法 通过定义 draggable 区域的边界来约束每个 draggable 的运动,使用 containment 选项来指定一个父级的 DOM 元素或者一 个 jQuery 选择器 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&

Dom元素中的元素应用

1.创建与修改table元素: 创建表格:var a=document.createElement("table"); 创建表格中的tbody,并且添加入表格a中:var b=document.createElemrnt("tbody");a.appendChild(b); 同理即可以创建添加出 行tr 列td: 另一种方法: b.insertRow(0); //创建第一行 b.rows[0].insertCell(0); //在第一行中创建第一列 b.rows[0

彻底搞清楚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

clientHeight ,offsetHeight,style.height,scrollHeight的区别与联系

style.height 包括元素的滚动条,不包括边框 clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeight offsetHeight 包括元素的滚动条和边框,只有在没有元素的滚动条和边框的情况下,offsetHeight==style.height==clientHeight scrollHeight offsetHeight+scrollTop,只有在没有元素的滚动条和边框和滚动时的情况下,offsetHe

clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系

style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoffsetHeight 包括元素的滚动条和边框,只有在没有元素的滚动条和边框的情况下,offsetHeight==style.height==clientHeightscrollHeight offsetHeight+scrollTop,只有在没有元素的滚动条和边框和滚动时的情况下,offsetHeig

JS中获取 DOM 元素的绝对位置实例详解

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

JS中选择DOM元素的方法集锦

各种选取元素的方法的速度,用原生的方法比jQuery要快差不多8倍,IE8是最慢的,IE9的速度差不多是IE8的3倍,Chrome的表现最好,其次是Firefox 选取文档元素的方法: 1.通过ID选取元素(getElementById)   1)使用方法:document.getElementById("domId")        其中,domId为要选取元素的id属性值   2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的

返本求源——DOM元素的特性与属性

抛砖引玉 很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr.prop.某天代码复查时,见到一段为某节点设置文本的代码: attr.set(node, 'innerText', 'Hello World!') 这段代码执行后并未生效,虽说innerText不是标准属性,尚未被ff支持,可用的是chrome,这个属性是被支持的.既然显示的文本没变,那就查看一下元素吧. innerText被添加到了html标签上,而换成prop模块后,成功的为节点替换文本. 以上

JS选取DOM元素的方法

摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今天试了下各种选取元素的方法的速度,用原生的方法比jquery要快差不多8倍,IE8是最慢的,IE9的速度差不多是IE8的3倍,Chrome的表现最好,其次是Firefox) 选取文档元素的方法: 1.通过ID选取元素(getElementById)   1)使用方法:document.getElem