### 元素的大小和位置 > 設置或者讀取一個元素的大小位置相關的量，會出現很多很相似的屬性，這里一一分析，并得出最佳使用方式。 >[danger] 滾動條的出現讓人感到疑惑，經過對比發現，滾動條的出現與否原理上簡單的，它始終只是占用內容區的空間。 >即：設置內容區寬度為100px ，滾動條寬度為10px。 沒有滾動條出現時候：內容真實寬度為100px； 出現了滾動條：那真實占有寬度為90px； **** #### 1. 偏移量 `offset` 任何展示在頁面上的元素都有其父框，這里討論的偏移量就是研究對象相對于其父框的。 1.1. 沒有出現滾動條 ~~~ offsetWidth=border左右寬度+padding左右寬度+content寬度 offsetHeight=border上下高度+padding上下高度+content高度 offsetLeft=marginLeft+left(設置了position) offsetTop=marginTop+top(設置了position) ~~~ **** 1.2. 出現了滾動條 >[info] 出現了滾動條后滾動條的寬度會占用本來設置的內容區的寬度，所以寬度也就是本來的元素的寬度，但是通過開發者工具來查看盒模型，會有迷惑。這時候可以自定義滾動條的寬度（水平和垂直方向），經過換算得出校驗結果。 [自定義滾動條樣式](scrollar-thumb.md)  #### 2. 客戶區 `client` ~~~ someElement.clientWidth=元素內容區寬度+左右內邊距 someElement.clientHeight=元素內容區高度+上下內邊距 ~~~ ~~~ 需要說明： 2.1 如果給元素設置了width，那么 無論有沒有滾動條，這里的clientWidth都等于設置的這個width， element.style.width 2.2 如果沒有設置寬度， 那么如果沒有滾動條，就等于 getComputedStyle(element, null).width 如果出現了滾動條，眼睛觀察到的元素可視寬度加上滾動條寬度才等于 getComputedStyle(element, null).width+滾動條寬度 ~~~ * * * * * #### 3. 滾動大小 ~~~ 指的是包含滾動內容的元素的大小 scrollHeight 在沒有滾動條的情況下，元素內容的總高度 scrollWidth 在沒有滾動條的情況下，元素內容的總寬度 通過設置下面這兩個屬性可以改變元素在水平/垂直方向的滾動位置 scrollLeft 被隱藏在內容區域左側的像素數 --水平 scrollTop 上方 --垂直 ~~~ * * * * * #### 4. 取得元素的位置和大小 ~~~ element.getBoundingClientRect() 這里的width==offsetWidth， height=offsetHeight，有沒有滾動條不影響 ~~~  * * * * * #### 5. 取得元素的計算樣式 ~~~ let style = window.getComputedStyle(element, [pseudoElt]); ~~~ > 方法給出應用活動樣式表后的元素的所有 `CSS` 屬性的值，并解析這些值可能包含的任何基本計算。 返回的樣式是一個實時的 `CSSStyleDeclaration` 對象，當元素的樣式更改時，它會自動更新本身。 >[success] 在許多在線的演示代碼中, `getComputedStyle` 是通過 `document.defaultView` 對象來調用的。 大部分情況下，這是不需要的， 因為可以直接通過 `window` 對象調用。 但有一種情況，你必需要使用 `defaultView` , 那是在 `firefox3.6` 上訪問子框架內的樣式 (`iframe`)