前端三大家族之client

站长

2022年09月08日 22:46 · 阅读数 29

本文将介绍 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>

欢迎交流！