首页技术文章正文

Client是什么？Client怎样获取元素

更新时间:2021年11月18日09时35分来源:传智教育浏览次数:

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

表9-3 client系列属性
1637132743236_元素可视.png

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

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

<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
}
</style>
<div>
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
<script>
var div = document.querySelector ('div');
console.log (div.clientHeight);
console.log(div.cllentTop);
console.log (div.clientLeft);
</script>

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

浏览器预设结果如图9-9所示。

1637134241680_可视化区域.jpg