首页技术文章正文

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>