scrollWidth,clientWidth与offsetWidth的区别

 

scrollWidth,clientWidth与offsetWidth的区别

scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。 一个scrollWidth和clientWidth的例子：

<DIV id=demo  style="OVERFLOW: hidden; WIDTH: 460px; COLOR: #ffffff; HEIGHT:

120px">  <DIV align=left>  <DIV align=left></DIV>  <TABLE height=120 cellPadding=0 width=600 align=right  border=0 cellspace="0">  <TBODY>  <TR>  <TD id=demo1 vAlign=top width=543>  <TABLE height=120 cellSpacing=0 cellPadding=0  width=543 border=0>  <TBODY>  <TR>  <TABLE borderColor=#ffffff cellSpacing=2  cellPadding=0 width=50 border=1>  <TD></TR></TBODY></TABLE></TD>  <TD id=demo2 vAlign=top  width=47></TD></TR></TBODY></TABLE>  <SCRIPT> var speed=1//速度数值越大速度越慢 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) /*scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。*/ demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </SCRIPT>  </DIV></DIV>

clientWidth、offsetWidth、clientHeight..区别

2007-10-15 22:24

clientWidth、offsetWidth、clientHeight..区别 IE6.0、FF1.06+： clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border IE5.0/5.5： clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height (需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关) offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width clientwidth：是元素的可见宽度。等于padding+width scrollwidth:是元素的宽度且包括滚动部分。