Element 對象提供一系列有關樣式的屬性: - clientHeight 和 clientWidth 屬性 - scrollHeight 和 scrollWidth 屬性 - scrollTop 和 scrollLeft 屬性 繼承于 Element 對象的 HTMLElement 對象同樣提供一系列有關樣式的屬性: - offsetParent 屬性 - offsetHeight 和 offsetWidth 屬性 - offsetTop 和 offsetLeft 屬性 ## 元素內部的寬度和高度 Element 對象的 clientWidth 和 clientHeight 屬性表示元素內部的寬度和高度，單位為像素。這些屬性的值包含內邊距，但不包含滾動條、邊框和外邊距。  我們也可以通過以下方式計算 clientWidth 和 clientHeight 屬性: ``` clientWidth = CSS 的 width + CSS 的 padding – 滾動條的寬度（如果存在的話） clientHeight = CSS 的 height + CSS 的 padding – 滾動條的高度（如果存在的話） ``` 我們可以通過以下示例代碼，學習測試 clientWidth 和 clientHeight 屬性: ```javascript var div = document.getElementById('d'); // 獲取 div 的樣式 var style = document.styleSheets[0].cssRules[0].style; // 計算 clientWidth 屬性的值 var clientWidth = parseInt(style.width) + parseInt(style.paddingLeft) + parseInt(style.paddingRight); // 測試打印 clientWidth = width + padding-left + padding-right console.log(div.clientWidth, clientWidth); ``` ## 內容區的寬度和高度 Element 對象的 scrollWidth 屬性表示元素內容的寬度，單位為像素。 scrollWidth 屬性返回元素內容區的寬度和元素本身寬度中更大的那個值。  Element 對象的 scrollHeight 屬性表示元素內容的高度，單位為像素。scrollHeight 屬性包含 overflow 樣式屬性導致不可見的內容區。  我們可以通過以下示例代碼，學習測試 scrollWidth 和 scrollHeight 屬性: ```javascript var div1 = document.getElementById('d1'); console.log(div1.scrollWidth); var div2 = document.getElementById('d2'); console.log(div2.scrollHeight); ``` ## 滾動條滾動的寬度和高度 Element 對象的 scrollLeft 屬性表示滾動條到元素左邊的距離，單位為像素。scrollLeft 屬性的默認值為 0。  Element 對象的 scrollTop 屬性表示滾動條到元素頂部的距離，單位為像素。scrollHeight 屬性的默認值為 0。  ## 判斷元素內容是否滾動到底 如果元素內容滾動到底的話，如下等式返回的結果為 true，否則返回為 false: ``` element.scrollHeight - element.scrollTop === element.clientHeight ```  ## 獲取指定元素的定位父元素 Element 對象提供的 offsetParent 屬性用于返回一個指向最近的包含該元素的定位元素。其語法結構如下: ```javascript var parentObj = element.offsetParent; ``` 上述語法結構中，作為返回值的 parentObj 表示一個指向最近的包含該元素的定位元素。 > **值得注意的是:** 如果祖先元素中沒有開始定位，則?offsetParent?為 body 元素。 我們可以通過以下示例代碼，學習 offsetParent 屬性的使用: ```html <style> #parent { position: relative; } </style> <script> var btn = document.getElementById('btn'); console.log(btn.offsetParent); </script> ``` ### offsetParent 屬性的瀏覽器兼容性 在不同瀏覽器中，對 offsetParent 屬性的支持情況也有所不同: - 在 Webkit 中，如果元素為隱藏的（該元素或其祖先元素的?style.display?為 "none"），或者該元素的?style.position被設為 "fixed"，則該屬性返回?null。 - 在 IE 9 中，如果該元素的?style.position?被設置為 "fixed"，則該屬性返回?null。（display:none?無影響。） ### 獲取指定元素的定位相關屬性 與開啟定位相關的屬性還有以下幾種: - 指定元素的 offsetWidth 和 offsetHeight 屬性分別表示該元素的布局寬度和布局高度，其中包含邊框、內邊距、滾動條和 CSS 設置的寬度或高度的值。 - 指定元素的 offsetLeft 和 offsetTop 屬性分別表示該元素距離定位父元素左邊界和上邊界的距離。 > **值得注意的是:** offsetWidth、offsetHeight、offsetLeft 和 offsetTop 屬性的值都是整數。