前端三大家族之client
本文将介绍 client 四个属性——首先是用于获取到可视窗口的大小的两个属性:
- clientHeight: 可以获取到元素可视窗口的高度,计算方式为 padding + height ,最终获取到的数值不带单位,不会获取到元素的 border 和 margin。
- clientWidth: 可以获取到元素可视窗口的宽度,具体的使用方式和上面的一样。*注意:这两个属性获取到的是最直观的值,如果元素的内容超出去出现了滚动条,不会影响获取到的数据。
然后是用于获取到元素上边框和左边框的两个属性:
- clientTop : 可以获取到元素的上边框的高度,获取到的数据不带单位。
- clientLeft : 可以获取到元素的左边框的高度,获取到的数据同样不带单位。
示例如下:
<!DOCTYPE html>
<html lang="cn">
<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>
</head>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
padding: 15px;
border: 10px solid yellow;
border-top: 20px solid yellow;
margin: 10px;
background-color: red;
}
</style>
<body>
<div class="box"></div>
<script>
// client用于获取元素可视窗口的大小,包括元素的 padding, 不包括元素的 border 和 margin,也就是说只是获取该元素 border 内的区域大小
let box = document.querySelector('.box')
console.log(box.clientHeight); // clientHeight 获取到元素可视窗口内的高度(不带单位) 230
console.log(box.clientWidth); // clientWidth 获取到元素可视窗口的宽度(不带单位) 230
console.log(box.clientLeft); // clientLeft 获取到元素的左边的边框的宽度 border-left 的值(不带单位) ----> 10
console.log(box.clientTop); // clientTop 获取到元素的上边的边框的高度 border-top 的值(不带单位) ----> 20
</script>
</body>
</html>
欢迎交流!
转载自:https://segmentfault.com/a/1190000041886000