JS获取div⾼度的⽅法
有时在写页⾯时，需要获取⼀个div的⾼度。怎么才能获取呢？哈哈，先上结论。有两种⽅法。
offsetHeight 、clientHeight
getComputedStyle
offsetHeight 与 clientHeight
这两个属性都能获取元素的⾼度，它们有什么区别呢？
代码说话~
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<meta charset="utf-8">
<style type="text/css">
#demo {
width: 100px;
height: 200px;
background: yellow;
margin: 10px;
padding: 10px;
border: 2px solid blue;
}
</style>
</head>
js获取子元素
<body>
<div id="demo">hello</div>
<script type="text/javascript">
var div = ElementById('demo');
console.log(div.offsetHeight); // 224
console.log(div.clientHeight); // 220
</script>
</body>
</html>
可以看出
offsetHeight = content + border + padding = 200 + 2 * 2 + 10 * 2 = 224
clientHeight = content + padding = 200 + 2 * 10 = 220
两个属性的差距于是就显⽽易见了。同样返回元素的⾼度，offsetHeight的值包括元素内容+内边距+边框，⽽clientHeight的值等于元素内容+内边距。区别就在于有没有边框~
但是，问题来了，我们想获取元素本⾝的⾼度呢？于是——
请往下看~
1，有⼩伙伴可能会说，我们可以直接利⽤style属性获取元素⾼度。然⽽在上⾯的代码中，
console.log(div.style.height) // ''
为空！
这是因为style属性只能获取元素标签style属性⾥的值。对于⼀个光秃秃的<div>，style的输出是空的。
下⾯把内部样式表中的⾼度注释掉，写在⾏内样式中，改动如下。
#demo {
width: 100px;
/*height: 200px;*/
background: yellow;
margin: 10px;
padding: 10px;
border: 2px solid blue;
}
<div id="demo" >hello</div>
这个时候style属性的输出为
console.log(div.style.height) // 200px
完美获得元素⾼度。
可是。问题⼜来了，如果我们每次都要写成内联样式，也太费事了吧。那么，该怎么办？
2，getComputedStyle
getComputedStyle⽅法获取的是最终应⽤在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗⼋代都显⽰出来）；这和style属性只能获取内联样式的⾏为形成了鲜明的对⽐。除此之外，getComputedStyle是只读的，但是style能⽂能武，可读可写，我们也可以利⽤它动态设置元素的⾼度。
我们只需输⼊这么⼀⾏代码。
我只截了部分，可以清晰地看到，getComputedStyle⽅法取得了元素的所有样式。
嗯，很适合查询。
可是我们只想要⾼度呀。那就让getPropertyValue⽅法来帮忙getPropertyValue⽅法可以获取CSS样式申明对象上的属性值。
如。
console.ComputedStyle(div).getPropertyValue('height')); // 200px
当计算边界矩形时，会考虑视⼝区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发⽣了改变，top和left属性值就会随之⽴即发⽣变化（因此，它们的值是相对于视⼝的，⽽不是绝对的）。如果不希望属性值随视⼝变化，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置⽆关的常量值。
详情请参考
再次END。
作者：公⼦七
链接：www.jianshu/p/58c12245c2cc
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
原⽂

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。