### 元素的大小和位置 > 设置或者读取一个元素的大小位置相关的量，会出现很多很相似的属性，这里一一分析，并得出最佳使用方式。 >[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`)