client 翻译为客户端,我们使用client系列相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小,元素大小等。
client系列属性 | 作用 |
---|---|
Element.clientTop | 返回元素上边框的大小 |
Element.clientLeft | 返回元素左边框的大小 |
Element.clientWidth | 返回自身包括padding,内容区的宽度,不含边框,返回数值不带单位 |
Element.clientHeight | 返回自身包括padding,内容区的高度,不含边框,返回数值不带单位 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
//client 宽度 和我们offsetWidth最大的区别就是 不包含边框
var div = document.querySelector('div');
console.log(div.clientWidth);
</script>
</body>
</html>
client 宽度 和我们offsetWidth最大的区别就是 不包含边框