client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
| client系列属性 | 作用 |
|---|---|
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回自身包括padding 、 内容区的宽度，不含边框，返回数值不带单位 |
| element.clientHeight | 返回自身包括padding 、 内容区的高度， 不含边框，返回数值不带单位 |
clientWidth 与offsetWidth的最大区别是clientWidth不包含边框border
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
border: 10px solid red;
padding: 10px;
margin: 100px;
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector('div');
// 可以改变盒子的宽度
// div.style.width=300+'px';
console.log("返回上边框："+div.clientTop);//10
console.log("返回width+padding："+div.clientWidth);//120
// clientWidth 与offsetWidth的最大区别是clientWidth不包含边框border
console.log("返回width+padding+border:"+div.offsetWidth);//140
</script>
</body>
2337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
