说说scrollWidth、clientWidth、offsetWidth

定义

scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)
clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变
offsetWidth 是对象可见的宽度,包滚动条等边线,会随窗口的显示大小改变

例子

举个例子说明一下:http://jsfiddle.net/songworld/6XKDK/

<html>
 <head>
  <title>scrollWidth、clientWidth、offsetWidth的区别</title>
 </head>
 <body>
  <textarea wrap="off" id="txt"></textarea>
  <button onclick="javascript:compare();">比较</button>
  <script type="text/javascript">
   function compare(){
     var txtarea = document.getElementById("txt");
     alert("scrollWidth:"+txtarea.scrollWidth+"\nclientWidth:"+txtarea.clientWidth+"\noffsetWidth:"+txtarea.offsetWidth);
   }
  </script>
 </body>
</html>
  • 当textarea没有输入内容时,scrollWidth和clientWidth值一样;
  • 当textarea输入值并且出现横向滚动条时,scrollWidth发生改变,clientWidth不变;
  • 两种情况下offsetWidth的值均未改变,并且大于clientWidth;

可见,scrollWidth是对象实际内容的宽度,clientWidth是对象可见内容的宽度(不含边线),offsetWidth也是对象可见内容的宽度(含边线)。

分析

同样是对象可见内容的宽度,为什么offsetWidth始终比clientWidth大呢?

原因就在于这个“边线”。在FF1.06+和IE6.0+上,有这样的区别:

clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

当然,如果出现的滚动条,offsetWidth也会包含滚动条的宽度,而clientWidth是不包含滚动条的宽度的。


你可能感兴趣的:(html)