乐鱼电竞



教育行业A股IPO第一股（股票代码 003032）

全国咨询/投诉热线：400-618-4000

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

更新时间:2021年11月18日09时35分 来源:乐鱼电竞 浏览次数:

好口碑IT培训

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

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

表9-3给出了client 系列的属性及说明 其中clientlet和clientTop获取的是左边框和上边框的大�。袢〉降脑馗叨群涂矶劝╬adding和内容区域。

下面我们通过简单代码获取元素的上边框和左边框，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

图9-9中，200是盒子高度大�。�10为盒子的上边概和左边框的大�。焙凶永锏哪谌莩龊凶痈叨仁�，其高度值不变，实际上获取的高度为可视区城的高度值。


猜你喜欢：

WEB前端培训之HTML5 WebSocket Client使用详解2

JS获取dom元素的方法有哪些？

prop()方法获取元素固有属性【web前端】

mark元素的作用和用法介绍【案例展示】

乐鱼电竞HTML&JS前端开发培训

0 分享到：
和我们在线交谈！
【网站地图】【sitemap】