offset,client,scroll,getStyle获取元素宽高的区别

offset，client，scroll，这三个是已有的获取元素宽高的方法。

getStyle是我们自己写的一种获取样式的办法，实际上是使用了getComputedStyle(obj,false)[name];的方法（IE下是obj.currentStyle[name]）。

getStyle函数：

        function getStyle(obj,name)
        {
            if(obj.currentStyle)
            {
//        IE低版本获取样式的方法
                return obj.currentStyle[name];
            }
            else
            {
//        IE高版本和其它浏览器支持的方法
                return getComputedStyle(obj,false)[name];
            }
        }

接下来就用实例来测试一下offset，client，scroll，getStyle获取元素宽高的区别

给测试用的test给定以下样式：

  #test{
            width: 100px;
            height: 100px;
            border: solid 10px #000000;
            margin: 11px;
            padding: 14px;
        }

body代码：

<div id="test">
   offset,client,scroll,getStyle获取元素宽高的区别
</div>

这里故意让文字的长度超出的test的宽度。

分别看offset,client,scroll,getStyle输出结果：

offsetWidth=148          100 +28(padding) +20(border)
clientWidth=128           100 +28(padding)
scrollWidth=246          这个是加上文字溢出部分的长度才出现的这值，当把text的宽度设大点，能包住文字的时候 值和clientWidth是一样的
getStyle=100px           只有100，没有加上任何的padding和marign因素，而且还有单位喔

完毕！