client offset scroll 之間的區別
- 2022 年 6 月 13 日
- 筆記
- html5, javascript, JavaScript高級
一、client
| 屬性 | 值 |
| clientWidth | 元素被設置的寬度 + padding左右內間距 |
| clientHeight | 元素被設置的高度 + padding上下內間距 |
| clientLeft | 左 邊框的寬度 |
| clientTop | 上 邊框的寬度 |
二、offset
| 屬性 | 值 |
| offsetWidth | 元素被設置的寬度 + padding左右內間距 + 左右邊框的值 |
| offsetHeight | 元素被設置的高度 + padding上下內間距 + 上下邊框的值 |
| offsetLeft | 元素外邊距離父級左內邊距 |
| offsetTop | 元素外邊距離父級上內邊距 |
| offsetParent | 返回這個元素的父級元素 |
註：1）offsetLeft/offsetTop：參照由父級身上的 position：absolute/fixed，如果父級元素身上沒有就逐層向上查找，直到 body；
2）offset 必須和 position 配合使用，往往這個值還必須是 absolute；
3）offset往往和我們做元素的運動有關；
三、scroll
| 屬性 | 值 |
| scrollWidth/scrollHeight | 就是我們設置的寬和高加內邊距（內容沒有溢出的前提，如果超出了範圍就按內容而定） |
| scrollLeft/scrollTop | 滾動條捲走的高度 |
四、總結
1）client系列不獲取邊框數值，offset會獲取邊框的數值；
2）以上兩者獲取到的數值都受元素被設置的寬高具體數值影響，如果在出現滾動條的情況下想獲取元素內所有內容的實際高度，則使用scrollHeight；
3）獲取瀏覽器的body的屬性是有兼容的
var dd=document . body || document . documentElement;獲取body的整個文檔的高
document . scrollHeight || document . documentElement . scrollHeight;獲取屏幕的高（瀏覽器的可視區）
document . body || document . documentElement . clientHeight
