【夯实基础】 js获取的clientHeight、offsetHeight和scrollHeight的区别

clientHeight、offsetHeight和scrollHeight的区别

clientHeight = content + padding, 不加溢出内容的高度，返回整数
offsetHeight = content + padding+border, 不加溢出内容的高度，返回整数
scrollHeight = content + padding+溢出内容的高度，不加border，返回整数

MDN建议获取精确的通过 element.getBoundingClientRect() 函数

亲测如下：

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0}.container {height: 200px;overflow: auto;background: pink;border: 100px solid #ccc;padding: 100px;box-sizing: content-box;}.content {height: 300px;background: rebeccapurple;box-sizing: content-box;color: #fff;display: flex;justify-content: center;align-items: center;;}</style>
</head>
<body><div class='container'><div class="content">子容器：300px</div></div><script>var testTarget = document.getElementsByClassName('container')[0];function log(element,type){console.log(type,element[type])}log(testTarget,'clientHeight');log(testTarget,'offsetHeight');log(testTarget,'scrollHeight');</script>
</body>
</html>

网上看了很多总不明白，自己亲自动手很清晰了，记录自己的探索过程，希望在前端道路越走越远，加油！

参考：
MDN | clientHeight

w3c规范 | clientHeight

【夯实基础】 js获取的clientHeight、offsetHeight和scrollHeight的区别相关推荐

夯实基础js - 语句篇
下面这些值将被计算出 false (also known as Falsy values): false undefined null 0 NaN 空字符串 ("") 当传递给条件 ...
夯实基础 js数据类型
由于内存限制数值不可能无穷大最小值在Number.MIN_VALUE里面最大值在 Number.MAX_VALUE里面 Infinity无穷判断一个数在不在这个范围内可以使用isFinite ...
彻底搞懂clientHeight、offsetHeight、scrollHeight的区别
我们开发web代码的时候,经常回遇到各种高度的计算. 因为总是忘记几者之间得区别,每次都要现查,这次通过这篇文章彻底搞明白这几个长度的区别. 1.定义说明条目含义图示 clientHeight ...
JS获取对象属性的各种方式和区别（自身/原型属性、可枚举/不可枚举）
对象的属性有自身属性和原型属性之分,自身属性是对象自己的属性,原型属性是存在于原型链上的属性. 可以用Object.prototype.hasOwnProperty()判断是自身属性还是原型属性.(i ...
offsetHeight, clientHeight与scrollHeight的区别
[size=xx-large][color=indigo]offsetHeight, clientHeight与scrollHeight的区别[/color][/size] [size=large][ ...
html 获得div的高度,如何用js获取div不确定的自适应高度（currentStyle与offsetHeight）...
设计网页时,一些元素(如div)因显示的内容多少事先不确定,所以不能固定高度,也就是让它根据内容的多少自动调整高度,即自适应高度. 对于div元素不确定的自适应高度,如何用js获取当前高度呢?一般有两 ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
JS获取当前对象大小以及屏幕分辨率等...
<!DOCTYPE html> <html> <head><meta charset="utf-8"/><meta name= ...
js获取网页的各种高度
原文:js获取网页的各种高度网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: docum ...

【夯实基础】 js获取的clientHeight、offsetHeight和scrollHeight的区别

【夯实基础】 js获取的clientHeight、offsetHeight和scrollHeight的区别相关推荐

最新文章

热门文章

【夯实基础 】 js获取的clientHeight、offsetHeight和scrollHeight的区别

【夯实基础 】 js获取的clientHeight、offsetHeight和scrollHeight的区别相关推荐

最新文章

热门文章

【夯实基础】 js获取的clientHeight、offsetHeight和scrollHeight的区别

【夯实基础】 js获取的clientHeight、offsetHeight和scrollHeight的区别相关推荐