前端中 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组件中，因为他的结果不是整数，有小数结果，更加准确。

兼容性：

1、IE8 及更低没有返回 width 和 height。

2、IE 和 Edge 返回的内容不包括 x 和 y 属性。

本文来源：JuFoFu

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

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