通過client獲取元素的上邊框和左邊框

表9-3 client系列屬性

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

下面我們通過簡單代碼獲取元素的上邊框和左邊框，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所示。

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