js获取元素高度:clientHeight、offsetHeight
一、文字说明
clientHeight:content高度 + padding高度
offsetHeight:content高度 + padding高度 + border高度
二、代码演示
提示:获取元素宽度可以同理模仿
<!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>042-clientHeight、offsetHeight</title>
<style>
.box-item {
background-color: rgb(230, 228, 152);
border: 5px solid red;
width: 100px;
height: 100px;
padding: 20px;
margin: 10px;
}
</style>
</head>
<body>
<div class="box-item"></div>
<script type="text/javascript">
// 获取元素
const itemEle = document.getElementsByClassName('box-item')[0]
console.log('itemEle', itemEle)
// clientHeight:content高度 + padding高度
const itemClientHeight = itemEle.clientHeight
console.log('itemClientHeight', itemClientHeight) // 140
// offsetHeight:content高度 + padding高度 + border高度
const itemOffsetHeight = itemEle.offsetHeight
console.log('itemOffsetHeight', itemOffsetHeight) // 150
// 宽度计算同高度:clientWidth、offsetWidth
</script>
</body>
</html>
三、图片说明
注意:我个人把实际内容区域称为content,非官方称呼
四、推荐理解box-sizing: border-box;
宽高计算之box-sizing,解决你宽高计算总是不对的问题👇👇👇
图解说明令人困惑的box-sizing: border-box; content-box;