获取元素尺寸（JavaScript 和 jQuery）

    在写代码的时候要经常用的元素宽、高， 可以通过getComputedStyle(dom)["width"]， 但是有点麻烦，dom提供了获取元素宽高值的快捷方式。

    getComputedStyle 

        返回值类型： 字符串string

        返回值：        内容宽 content

JavaScript快捷获取元素尺寸

    1. clientWidth 获取元素的（content + padding）宽 

    element.clientWidth

        返回值类型： 数值number

        返回值：        内容宽 content + padding

    2. clientHeight 获取元素的（content + padding）高

    element.clientHeight

        返回值类型： 数值number

        返回值：        内容高 content +padding

    3. offsetWidth 获取元素的（content + padding + border）宽 

    element.offsetWidth 

        返回值类型： 数值number

        返回值：        内容宽 content + padding + border

    4. offsetHeight 获取元素的（content + padding + border）高

    element.offsetHeight 

        返回值类型： 数值number

        返回值：        内容高 content + padding + border

总结：

clientWidth	获取元素content + padding 的宽
clientHeight	获取元素content + padding 的高
offsetWidth	获取元素content + padding + border 的宽
offsetHeight	获取元素content + padding + border 的高

5. clientLeft 获取元素左边框的值

    element.clientLeft 

        返回值类型： 数值number

        返回值：        border-left的值

6. clientTop 获取元素上边框的值

     element.clientTop

        返回值类型： 数值number

        返回值：        border-top的值

总结：

clientLeft	获取元素的左边框的值
clientTop	获取元素的上边框的值

jQuery快捷获取元素尺寸

jQuery方法	返回值含义	返回值类型
element.width()	获取元素 content 部分 的宽	number
element.height()	获取元素 content 部分 的高	number
element.innerWidth()	获取元素 content + padding 部分 的宽	number
element.innerHeight()	获取元素 content + padding 部分 的宽	number
element.outerWidth()	获取元素 content+ padding + border 部分 的宽	number
element.outerHeight()	获取元素 content+ padding + border 部分 的宽	number
element.outerWidth(true)	获取元素 content+ padding + border + margin 部分 的宽	number
element.outerHeight(true)	获取元素 content+ padding + border + margin 部分 的宽	number