元素可视区client系列

client的中文意思是客户端，通过使用client系列的相关属性可以获取元素可视区的相关信息。例如，可以动态地得到元素的边框大小、元素大小等。client系列的相关属性如表1所示。

表1 client系列属性

表1中给出了client系列的属性及说明，其中clientLeft和clientTop获取的是左边框和上边框的大小，获取到的元素高度和宽度包括padding和内容区域。

下面我们通过简单代码获取元素的上边框和左边框，HTML代码如下。

 1  <style>

 2   div {

 3    width: 200px;

 4    height: 200px;

 5    background-color: pink;

 6    border: 10px solid red;

 7   }

 8  </style>

 9  <div>

 10  我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容

 11  我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容

 12  我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容

 13  我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容

 14  我是内容我是内容我是内容我是内容我是内容

 15 </div>

 16 <script>

 17  var div = document.querySelector('div');

 18  console.log(div.clientHeight);

 19  console.log(div.clientTop);

 20  console.log(div.clientLeft);

 21 </script>

上述代码中，第18~20行代码打印元素的高度、上边框和左边框的大小。第2~7行设置元素边框初始值为10px，宽度为200px，高度为200px。第9~15行代码设置div元素的内容超出div的高度。

浏览器预览结果如图1所示。

图1 可视区域高度和边框

图1中，200是盒子高度大小，10为盒子的上边框和左边框的大小，当盒子里的内容超出盒子高度时，其高度值不变，实际上获取的高度为可视区域的高度值