一、client 家族的組成
1、clientWidth 和 clientHeight
元素調用時：
- clientWidth：獲取元素的可見寬度（width + padding）。
- clientHeight：獲取元素的可見高度（height + padding）。
body/html 調用時：
- clientWidth：獲取網頁可視區域寬度。
- clientHeight：獲取網頁可視區域高度。
**聲明**：
- `clientWidth` 和 `clientHeight` 屬性是只讀的，不可修改。
- `clientWidth` 和 `clientHeight` 的值都是不帶 px 的，返回的都是一個數字，可以直接進行計算。
2、clientX 和 clientY
event調用：
- clientX：鼠標距離可視區域左側距離。
- clientY：鼠標距離可視區域上側距離。
3、clientTop 和 clientLeft
- clientTop：盒子的上border。
- clientLeft：盒子的左border。
二、三大家族 offset/scroll/client 的區別
區別1：寬高
- offsetWidth = width + padding + border
- offsetHeight = height + padding + border
- scrollWidth = 內容寬度（不包含border）
- scrollHeight = 內容高度（不包含border）
- clientWidth = width + padding
- clientHeight = height + padding
區別2：上左
offsetTop/offsetLeft：
- 調用者：任意元素。(盒子為主)
- 作用：距離父系盒子中帶有定位的距離。
scrollTop/scrollLeft：
- 調用者：document.body.scrollTop（window調用）(盒子也可以調用，但必須有滾動條)
- 作用：瀏覽器無法顯示的部分（被卷去的部分）。
clientY/clientX：
- 調用者：event
- 作用：鼠標距離瀏覽器可視區域的距離（左、上）。
三、函數封裝：獲取瀏覽器的寬高（可視區域）
函數封裝如下：
```javascript
//函數封裝：獲取屏幕可視區域的寬高
function client() {
if (window.innerHeight !== undefined) {
//ie9及其以上的版本的寫法
return {
"width": window.innerWidth,
"height": window.innerHeight
}
} else if (document.compatMode === "CSS1Compat") {
//標准模式的寫法（有DTD時）
return {
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
}
} else {
//沒有DTD時的寫法
return {
"width": document.body.clientWidth,
"height": document.body.clientHeight
}
}
}
```
四、案例
**案例：根據瀏覽器的可視寬度，給定不同的背景的色。**
> PS：這個可以用來做響應式。
代碼如下：（需要用到上面的封裝好的方法）
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="tools.js"></script>
<script>
//需求：瀏覽器每次更改大小，判斷是否符合某一標准然后給背景上色。
// // >960紅色，大於640小於960藍色，小於640綠色。
window.onresize = fn; //頁面大小發生變化時，執行該函數。
//頁面加載的時候直接執行一次函數，確定瀏覽器可視區域的寬，給背景上色
fn();
//封裝成函數，然后指定的時候去調用和綁定函數名
function fn() {
if (client().width > 960) {
document.body.style.backgroundColor = "red";
} else if (client().width > 640) {
document.body.style.backgroundColor = "blue";
} else {
document.body.style.backgroundColor = "green";
}
}
</script>
</body>
</html>
```
上當代碼中，`window.onresize`事件指的是：在窗口或框架被調整大小時發生。各個事件的解釋如下：
- window.onscroll 屏幕滑動
- window.onresize 瀏覽器大小變化
- window.onload 頁面加載完畢
- div.onmousemove 鼠標在盒子上移動（注意：不是盒子移動）
五、獲取顯示器的分辨率
獲取顯示器的分辨率：
```javascript
window.onresize = function () {
document.title = window.screen.width + " " + window.screen.height;
}
```