前端中 width 的获取

这篇文章实际上是在了解 viewport 的过程当中发现这些概念容易混淆作了个小小的总结。viewport的首要关键是宽度的获取，宽度的计算有下面几个属性和方法：

• clientWidth
• offsetWidth
• innerWidth
• scrollWidth
• getBoundingClientRect().width

Element.clientWidth

非行内元素的内部宽度（inner width of an element），包括 padding，不包括 margin 和 border。行内元素获取的值一直是 0，值为整数，小数四舍五入（round the value to an integer），属性为只读。

HTMLElement.offsetWidth

获取元素外围宽度（layout width of an element），包括 padding，border 以及滚动条，不包括 margin。一样是整数以及只读。
注：这里能够看到一个是 Element 的属性，一个是 HTMLElement 的属性，HTMLElement 继承于 Element，Element 不只包括 html 元素，还有其余像 XML 之类的能在网页上展现的元素。可见 clientWidth 应用范围更广，这里暂时不做区别。

Window.innerWidth

innerWidth 属于 window 对象，包括了 window, frame, frameset, secondary window（二级窗口，这个不知道是啥），和元素无关，获取的是 window 的宽度，包括了滚动条，属性只读。

Window.outerWidth

获取的是浏览器外部宽度，这个对于页面渲染来讲意义不大。包括了全部的浏览器元素，例如标题栏之类的。在 iphone 6sp 上测试值为0。screen.width 和这个值结果相似，在 iphone 6sp上正常。

Element.scrollWidth

当元素内部内容没有超出时，和 clientWidth 相似，获取的是元素的内容宽度，包括 padding。当内容（包括全部子元素，不过）溢出时，会把溢出内容的宽度计算进去，就算设置的 overflow 为 hidden，不过溢出内容须要是有效内容，display 为 none 或者没有内容只设置了宽度的元素是不会计算入内的。

Element.getBoundingClientRect()

这个方法不是专门返回元素宽度的，返回的是一个 DOMRect 对象：

{
    bottom:-75
    height:160
    left:88
    right:248
    top:-235
    width:160
    x:88
    y:-235
}

除了 winth 和 height 外，其余值相对于 viewport。宽高计算相似 offsetWidth，包括 padding，border，不包括 margin。MDN 上说 Empty border-boxes are completely ignored. 不过不知道什么是 Empty border-boxes，测试出来的结果都是不为0 的，行内元素也可以获取宽度。x，y，left，right 的值是相对于 viewport 获取的，即页面滚动时会有所影响。
getBoundingClientRect() 的计算会更经常使用于轮播等一些js组件中，由于他的结果不是整数，有小数结果，更加准确。

兼容性：
一、IE8 及更低没有返回 width 和 height。
二、IE 和 Edge 返回的内容不包括 x 和 y 属性。

本文来源：JuFoFu

本文地址：http://www.cnblogs.com/JuFoFu/p/7719679.html

水平有限，错误欢迎指正，转载请注明出处。