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

来源：互联网发布：高晓松老婆知乎编辑：程序博客网时间：2024/05/10 02:27

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因素，而且还有单位喔

完毕！

0 0