scrollLeft,scrollWidth,clientWid…

来自：http://wiflish.javaeye.com/blog/419068

scrollHeight:<wbr>获取对象的滚动高度。<wbr><br> scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离<br> scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离<br> scrollWidth:获取对象的滚动宽度<br> offsetHeight:获取对象相对于版面或由父坐标<wbr>offsetParent<wbr>属性指定的父坐标的高度<br> offsetLeft:获取对象相对于版面或由<wbr>offsetParent<wbr>属性指定的父坐标的计算左侧位置<br> offsetTop:获取对象相对于版面或由<wbr>offsetTop<wbr>属性指定的父坐标的计算顶端位置<wbr><br> event.clientX<wbr>相对文档的水平座标<br> event.clientY<wbr>相对文档的垂直座标<br><br> event.offsetX<wbr>相对容器的水平坐标<br> event.offsetY<wbr>相对容器的垂直坐标<wbr><br> document.documentElement.scrollTop<wbr>垂直方向滚动的值<br> event.clientX+document.documentElement.scrollTop<wbr>相对文档的水平座标+垂直方向滚动的量<wbr><br><br> 以上主要指IE之中，FireFox差异如下：<br> IE6.0、FF1.06+：<br> clientWidth<wbr>=<wbr>width<wbr>+<wbr>padding<br> clientHeight<wbr>=<wbr>height<wbr>+<wbr>padding<br> offsetWidth<wbr>=<wbr>width<wbr>+<wbr>padding<wbr>+<wbr>border<br> offsetHeight<wbr>=<wbr>height<wbr>+<wbr>padding<wbr>+<wbr>border<br> IE5.0/5.5：<br> clientWidth<wbr>=<wbr>width<wbr>-<wbr>border<br> clientHeight<wbr>=<wbr>height<wbr>-<wbr>border<br> offsetWidth<wbr>=<wbr>width<br> offsetHeight<wbr>=<wbr>height<br> (需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

以下为源代码 你可先修改部分代码，再测试：

测试

[xhtml] view plain copy print ?

1. html<wbr>PUBLIC<wbr>"-//W3C//DTD<wbr>XHTML<wbr>1.0<wbr>Transitional//EN"<wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
2. "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"><wbr><wbr></wbr></wbr>
3. <</span>html<wbr><wbr></wbr></wbr>
4. xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]"<wbr><wbr></wbr></wbr>
5. lang="gb2312"><wbr><span>&lt;&lt;/span&gt;<span>head</span><span>&gt;</span><wbr><span>&lt;&lt;/span&gt;<span>head</span><span>&gt;</span><wbr><span>&lt;&lt;/span&gt;<span>title</span><span>&gt;</span><wbr><wbr></wbr></wbr></span></wbr></span></wbr></span></wbr>
6. 代码实例：关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较<wbr><wbr></wbr></wbr>
7. </</span>title><wbr><span>&lt;&lt;/span&gt;<span>meta</span><wbr><span>http-equiv</span>=<span>"content-type"</span><wbr><span>content</span>="text/html;<wbr><wbr></wbr></wbr></wbr></wbr></span></wbr>
8. charset=gb2312"<wbr><span>/&gt;</span><wbr><span>&lt;&lt;/span&gt;<span>meta</span><wbr>name="<span>author</span>"<wbr><wbr></wbr></wbr></wbr></span></wbr></wbr>
9. content="枫岩,CnLei.y.l@gmail.com"><wbr><span>&lt;&lt;/span&gt;<span>meta</span><wbr><span>name</span>=<span>"copyright"</span><wbr><wbr></wbr></wbr></wbr></span></wbr>
10. content="[url=http://www.cnlei.com]http://www.cnlei.com[/url]"<wbr><span>/&gt;</span><wbr><wbr></wbr></wbr></wbr>
11. <</span>meta<wbr><span>name</span>=<span>"description"</span><wbr><wbr></wbr></wbr></wbr>
12. content="关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较"<wbr><wbr></wbr></wbr>
13. /><wbr><span>&lt;&lt;/span&gt;<span>mce:style</span><wbr><span>type</span>=<span>"text/css"</span><wbr><span>media</span>=<span>"all"</span><span>&gt;</span> </wbr></wbr></span> <p>点击下面的链接:</p> <div> <p><a>GetClientWidth();</a> <a>GetClientHeight();</a></p> <p><a>GetOffsetWidth();</a> <a>GetOffsetHeight();</a></p> </div> <div> <p><strong>IE6.0、FF1.06+：</strong><br> clientWidth = width + padding = 300+10×2 = 320<br> clientHeight = height + padding = 200+10×2 = 220<br> offsetWidth = width + padding + border = 300+10×2+10×2= 340<br> offsetHeight = height + padding + border = 200+10×2+10×2 = 240</p> <p><strong>IE5.0/5.5：</strong><br> clientWidth = width - border = 300-10×2 = 280<br> clientHeight = height - border = 200-10×2 = 180<br> offsetWidth = width = 300<br> offsetHeight = height = 200</p> </div> </wbr>