本文自出“阿敏其人”技術博客，轉載請取得本人同意。
文：阿敏其人
一、client團隊成員
client，最直接的，是客戶端的意思。
Js中有一些系列的方法client的方法和屬性。
打開W3c，看一下Dom Element對象關於scroll的屬性。
關於client，大概有如下一些屬性：
| 屬性 | 解釋 |
|---|---|
| element.clientHeight | 在頁面上返回內容的可視高度 height + padding |
| element.clientWidth | 返回元素的可見寬度。在頁面上返回內容的可視寬度 width + padding |
offsetHeight、clientHeight、scrollHeight 之間的小對比
- offsetHeight：height + padding + border
- clientHeight： height + padding
- scrollHeight：大小是內容的大小 （可能超過offsetHeight）
image.png
二、clientHeight 和 clientWidth
計算方式
- clientHeight = height + padding；
- clientWidth = width + padding；
例子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box0{
width: 100px;
height: 200px;
padding: 10px;
border: 20px solid red;
margin: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="box0"></div>
</body>
<script>
var box0 = document.getElementById("box0");
console.log("box0.clientHeight： "+box0.clientHeight); // box0.clientHeight： 220
console.log("box0.clientWidth： "+box0.clientWidth); // box0.clientWidth： 120
</script>
</html>
.
.
通過結果可證。
clientHeight = height + padding；
clientWidth = width + padding；
同系列相關文章：
JS scroll系列簡明教程
JS offset系列簡明教程
本文完。