scrollWidth,clientWidth与offsetWidth的区别

 

javascript 中 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均无关)

offset是元素相对父元素的偏移宽度。等于border+padding+width
clientwidth：是元素的可见宽度。等于padding+width
scroll是元素的宽度且包括滚动部分。