教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

Client是什么?Client怎樣獲取元素

更新時間:2021年11月18日09時35分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

client的中文意思是客戶端,通過使用client系列的相關(guān)屬性可以獲取元素可視區(qū)的相關(guān)信息。例如,可以動態(tài)地得到元素的邊框大小、元素大小等。client系列的相關(guān)屬性如表9-3所示。

表9-3 client系列屬性
1637132743236_元素可視.png

表9-3給出了client 系列的屬性及說明 其中clientlet和clientTop獲取的是左邊框和上邊框的大小,獲取到的元素高度和寬度包括padding和內(nèi)容區(qū)域。

下面我們通過簡單代碼獲取元素的上邊框和左邊框,HTML代碼如下。

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

上述代碼中,第18~20行代碼打印元素的高度、上邊框和左邊框的大小。第2~7行代碼設(shè)置元素邊框初始值為10px,寬度為200px,高度為200px。第9~15行代碼設(shè)置div元素的內(nèi)容超出div的高度。

瀏覽器預(yù)設(shè)結(jié)果如圖9-9所示。

1637134241680_可視化區(qū)域.jpg

圖9-9中,200是盒子高度大小,10為盒子的上邊概和左邊框的大小,當(dāng)盒子里的內(nèi)容超出盒子高度時,其高度值不變,實際上獲取的高度為可視區(qū)城的高度值。


猜你喜歡:

WEB前端培訓(xùn)之HTML5 WebSocket Client使用詳解2

JS獲取dom元素的方法有哪些?

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

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

傳智教育HTML&JS前端開發(fā)培訓(xùn)

0 分享到:
和我們在線交談!