scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrol

来源：互联网发布：java多态的作用编辑：程序博客网时间：2024/05/02 01:13

题中的那么多属性让人头都大了，他们到底是什么意思？不同浏览器的实现是一样的吗？以下所有结论来自chrome版本 53.0.2785.89 (64-bit)和firefox版本52.0.2，操作系统ubuntu16.04的测试，关于IE及其它浏览器并没有考虑。

一、谈谈XXWidth

　　1、width

　　这个是style对象的一个属性，跟你在css样式里写的那个width的值是一样的，注意他是带单位的。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>1</title>    <style type="text/css">        div{            width: 100px;            height: 100px;            border: 20px;            margin: 20px;            padding: 20px;            background: red;        }    </style></head><body>    <div id="div"></div>    <script type="text/javascript">        var link = document.getElementsByTagName("style")[0];        var sheet = link.sheet||link.styleSheet;        var rules = sheet.rules || sheet.cssRules;        console.log(rules[0].style.width);    </script></body></html>

　　上述例子中结果都是 100px，当然chrome和firefox在获取CSSStyleSheet对象和cssRules对象上还有区别，chorme由sheet和rules得到，firefox由styleSheet 和cssRules得到。

　　2、clientWidth

　　这个值表示的是可用区域的宽度，测试没有竖向滚动条时两个浏览器对这个属性保持一致，有滚动条时，chrome认为滚动条是15px，ff认为是10px;而且通过document.body.clientWidth 得到的值和通过document.documentElement.clientWidth得到的值不同，前者等于css的width+左右padding，后者仍然是可用区的宽。有人将这个属性交可视区宽，本人认为不对，可以理解成可用区宽。自行体会，注意padding也是可用的。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>clientWidth</title>        <style type="text/css">        body{            margin: 0;            padding: 20px;            width: 5000px;            /* height: 10000000px; */        }    </style></head><body>    <script type="text/javascript">        console.log(document.documentElement.clientWidth);    </script></body></html>

　　我测试结果两个都是1319（你的测试可能不一样，浏览器的宽度不一样）;

　　如果出现竖向滚动条（去掉height注释），chrome值为1304,firefox值为1309。

　　如果用body代替上述的documentElement则，结果为5040.　如果设置box-sizing:border-box则值为5000.此处可以用标准盒子模型解释。

　　3、offsetWidth

　　表示一个对象的实际宽度。

<!DOCTYPE html><html><head>    <title>offsetWidth</title>    <style type="text/css">        div{            width: 100px;            height: 100px;            margin: 10px;            padding: 13px;            background: red;        }    </style></head><body>    <div></div>    <script type="text/javascript">        var div = document.getElementsByTagName("div")[0];        console.log(div.offsetWidth);    </script></body></html>

　　得到值为126，加上box-sizing: border-box;为100

　　看看有滚动条的情况

<!DOCTYPE html><html><head>    <title>offsetWidth</title>    <style type="text/css">        .outer{            width: 100px;            height: 100px;            margin: 10px;            padding: 13px;            background: red;            box-sizing: border-box;            overflow: scroll;        }        .inner{            width: 1000px;            height: 1000px;        }    </style></head><body>    <div class="outer">        <div class="inner" id="inner"></div>    </div>    <script type="text/javascript">        var div = document.getElementById("inner");        console.log(div.offsetWidth);    </script></body></html>

　　发现仍然是表示真实宽度。

　　4、scrollWidth

　　表示的是对象真实宽度，这个和offsetWidth有什么区别呢，我得测试测试。没区别吗？我将上面的offsetWidth换成scrollWidth后发现还是1000啊！在测试，要是一样搞两个干嘛呢，一定有区别的。

<!DOCTYPE html><html><head>    <title>scrollWidth</title>    <style type="text/css">        .outer{            width: 100px;            height: 100px;            margin: 10px;            padding: 13px;            background: red;            box-sizing: border-box;            overflow: scroll;        }        .inner{            width: 1000px;            height: 1000px;            border: 13px solid red;            padding: 12px;            margin:4px;        }    </style></head><body>    <div class="outer">        <div class="inner" id="inner"></div>    </div>    <script type="text/javascript">        var div = document.getElementById("inner");        console.log(div.scrollWidth);    </script></body></html>

　　一不做，二不修，border，margin，padding全上。发现offsetWidth为1050,说明它算了padding和borer，而scrollWidth为1024,只算了padding没算border。

　　哦！我知道了，原来offsetWidth算边宽，而scrollWidth不算边宽啊。

　　二、谈谈XXtop

　　上面谈得是与大小相关的，下面谈与位置相关的。

　　1、top

　　这个是style的属性，没有定义返回“”，定义在link或者style中的拿不到。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>top</title>    <style type="text/css">    </style></head><body>    <div id="div" style="width: 100px;height: 100px;background: red;position: relative;top: 20px"></div></body><script type="text/javascript">    var div = document.getElementById("div");    console.log(div.style.top);</script></html>

　　返回20px，带单位。

　　2、offsetTop

　　他更top差不多，但是是返回的数字，而且一定有值。就是这样

　　结果我测试了一下，发现不对啊，就是上面的那个例子，我直接改了个offsetTop，你猜怎么着，结果是28不是20,然后我给了一个body{margin:0;}, 然后就是20了，你说奇怪不奇怪。我的理解是。因为上面是position：relative;是相对自己定位的，所以它本来的上边距离外面那个宽有8px，8px是body的margin引起的。而offsetTop考虑了这个8,是从父元素的最最外边算得，不是border那里。

　　3、scrollTop

　　表示的是被卷去的高度。比如下面就是0,因为获取的时候还没卷。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>top</title>    <style type="text/css">        body{            margin: 10px;            height: 1000000000000px;        }    </style></head><body>    <div id="div" style="width: 100px;height: 100px;background: red;position: relative;top: 20px"></div></body><script type="text/javascript">    var b = document.body;    console.log(b.scrollTop);</script></html>

三、关于xxheight和xxleft，offsetParent

　　xxheight和xxleft跟上面的差不多，对比一下就知道了。offsetParent和parentNode是有区别的，看这里：http://blog.csdn.net/u012552049/article/details/45390181，offset相对于谁偏移，相对于谁就是offsetParent，这个元素一般来说是用了定位的元素。

参考：

http://www.cnblogs.com/kongxianghai/p/4192032.html
http://blog.csdn.net/woxueliuyun/article/details/8638427
http://wenku.it168.com/d_000647093.shtml

阅读全文

0 0