scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解.doc

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解(转) 2007/04/23 10:12 P.M. HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标event.clientY 相对文档的垂直座标event.offsetX 相对容器的水平坐标event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 以上主要指IE之中，FireFox差异如下：IE6.0、FF1.06+：clientWidth = width + paddingclientHeight = height + paddingoffsetWidth = width + padding + borderoffsetHeight = height + padding + borderIE5.0/5.5：clientWidth = width - borderclientHeight = height - borderoffsetWidth = widthoffsetHeight = height(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)测试代码： ? ? ? 测试代码: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN [url=/TR/xhtml1/DTD/xhtml1-transitional.dtd]/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]html xmlns=[url=/1999/xhtml]/1999/xhtml[/url] lang=gb2312headheadtitle 代码实例：关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较 /titlemeta http-equiv=content-type content=text/html; charset=gb2312 /meta name=author content=枫岩,CnLei.y.l@meta name=copyright content=[url=][/url] /meta name=description content=关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较 /style type=text/css media=allbody {font-size:14px;}a,a:visited {color:#00f;}#Div_CnLei {width:300px;height:200px;padding:10px;border:10px solid #ccc;background:#eee;font-size:12px;}#Div_CnLei p {margin:0;padding:10px;background:#fff;}/stylescript type=text/javascriptfunction Obj(s){return document.getElementById(s)?document.getElementById(s):s;}function GetClientWidth(o){return Obj(o).clientWidth;}function GetCli