offsetwidth的用法

clientWidth与offsetWidth的区别

scrollWidth： 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了会改变对象的实际度）。

clientWidth ：是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。

offsetWidth： 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。

一个scrollWidth和clientWidth的例子：

<TABLE border="0" cellSpacing="0" cellPadding="0" width="100%">
                    <TBODY>
                        <TR>
                            <TD width="42">&nbsp;</TD>
                            <TD width="650">
                            <div id="tdemo">
                            <div id="tindemo">
                            <div id="tdemo1"><a href="#"> <img src="./img/07.jpg"
                                border="0" /></a> <a href="#"><img src="./img/08.jpg"
                                border="0" /></a> <a href="#"><img src="./img/09.jpg"
                                border="0" /></a> <a href="#"><img src="./img/10.jpg"
                                border="0" /></a> <a href="#"><img src="./img/11.jpg"
                                border="0" /></a> <a href="#"><img src="./img/12.jpg"
                                border="0" /></a> <a href="#"><img src="./img/13.jpg"
                                border="0" /></a> <a href="#"><img src="./img/14.jpg"
                                border="0" /></a></div>
                            <div id="tdemo2"></div>
                            </div>
                            </div>
                            <script>
            <!--
            var tspeed=20;
            var ttab=document.getElementById("tdemo");
            var ttab1=document.getElementById("tdemo1");
            var ttab2=document.getElementById("tdemo2");
            ttab2.innerHTML=ttab1.innerHTML;
            function Marqueet(){
            if(ttab2.offsetWidth-ttab.scrollLeft<=0)
            ttab.scrollLeft-=ttab1.offsetWidth
            else{
            ttab.scrollLeft++;
            }
            }
            var MyMart=setInterval(Marqueet,tspeed);
            ttab.onmouseover=function() {clearInterval(MyMart)};
            ttab.onmouseout=function() {MyMart=setInterval(Marqueet,tspeed)};
            -->
            </script></TD>
                            <TD width="42">&nbsp;</TD>
                        </TR>
                    </TBODY>
                </TABLE>
                </TD>
            </TR>
        </TBODY>
    </TABLE>