浏览器offsetWidth、clientWidth、scrollWith等总结

    对象尺寸会涉及width和height，我们以width为例，height则是一样的道理。

    1、clientWidth：对象可见的宽度，不包括滚动条等边线，会随窗口的显示大小改变。

    clientWidth  =  元素width + padding

    2、scrollWidth：实际内容的宽，不包括边线宽度，会随着对象中内容的多少改变。

    无滚动时等于clientWidth，有滚动时，需要计算

    3、offsetWidth：对象的可见宽度，包括滚动条等边线，会随窗口的显示大小改变。

    offsetWidth  =  元素width + padding + border

    CSS中的margin属性，与clientWidth、offsetWidth均无关

 

    4、width：不包括滚动条和工具条的宽度。

    5、innerWidth：窗口中文档显示区域的宽度，不包括菜单栏、工具栏等部分，该属性可读可写。注意，IE浏览器不支持该属性。

    6、outerWidth：窗口中文档显示区域的宽度，包含菜单栏、工具栏等部分。

        获取outerWidth有两个jquery方法

        outerWidth()：outerWidth  =  padding + border

        outerWidth(true)： outerWidth  =  margin + padding + border

 

    注意事项：

    1.获取这些尺寸信息时，clientWidth、scrollWidth和offsetWidth用<document.getElementById(‘Id’).属性>形式获取，它们是javascript对象属性，没有jquery方法。

    2.有jquery方法的是： width()、 innerWidth()、outerWidth()、outerWidth(true)

    3.一般情况下 width() <= innerWidth() <= outerWidth() <= outerWidth(true)