首页技术文章正文

通过client获取元素的上边框和左边框

更新时间:2021-11-17 来源:黑马程序员 浏览量:

IT培训班

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

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






猜你喜欢:

jQuery元素内容操作的方法有多少种?

H5中article元素的作用是什么?

JavaScript中如何搜索数组元素?

黑马程序员web前端开发开发工程师培训

分享到:
在线咨询 我要报名