简介
1.clientHeight/clientWidth 属性是一个只读属性，它返回该元素的像素高度/宽度，高度/宽度 包含内边距（padding），不包含边框（border），外边距（margin）和滚动条，是一个整数，单位是像素 px。
2.clientTop/clientLeft 属性是一个只读属性，表示一个元素的顶部边框/左边框 的宽度，以像素表示。不包括外边距和内边距。
完整代码
以下代码均在Chrome浏览器中测试
<!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>
*{
margin: 0;
padding: 0;
}
.div{
width: 300px;
height: 300px;
padding: 13px;
margin: 17px;
border: 11px teal solid;
background-color: wheat;
}
#btn{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="div"></div>
<button id="btn">点我</button>
</body>
<script>
let div = document.getElementsByTagName('div')[0]
btn.onclick=function(){
// .div(height/width:300 + padding:13*2) == 326
console.log('clientHeight',div.clientHeight);
console.log('clientWidth',div.clientWidth);
// .div(border:11)
console.log('clientTop',div.clientTop);
console.log('clientLeft',div.clientLeft);
}
</script>
</html>
效果如下：
client(可视区域)相对于offset,scroll来说，比较好理解。
总结
下面将offset、scroll、client的关系以图形的方式来展示：
相关文章：
链接: 一篇弄懂 offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent的区别！（1）.
链接: 一篇弄懂 scrollWidth、scrollHeight、scrollLeft和scrollTop的区别！（2）.
173万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
