《JS中的offsetWidth&offsetHeight》由会员分享，可在线阅读，更多相关《JS中的offsetWidth&offsetHeight（7页珍藏版）》请在金锄头文库上搜索。
1、scrollHeight: 获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置event.clientX 相对文档的水平座标e
2、vent.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 + padd
3、ing + borderoffsetHeight = height + padding + borderIE5.0/5.5：clientWidth = width - borderclientHeight = height - borderoffsetWidth = widthoffsetHeight = height(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)测试代码：CODE:Copy to clipboard 代码实例：关于clientWidth、offsetWidth、client
4、Height、offsetHeight的测试比较 body 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;function Obj(s)return document.getElementById(s)?document.getElementById(s):s;
5、function GetClientWidth(o)return Obj(o).clientWidth;function GetClientHeight(o)return Obj(o).clientHeight;function GetOffsetWidth(o)return Obj(o).offsetWidth;function GetOffsetHeight(o)return Obj(o).offsetHeight;点击下面的链接:GetClientWidth(); GetClientHeight();GetOffsetWidth(); GetOffsetHeight();IE6.0、FF
6、1.06+：clientWidth = width + padding = 300+102 = 320clientHeight = height + padding = 200+102 = 220offsetWidth = width + padding + border = 300+102+102= 340offsetHeight = height + padding + border = 200+102+102 = 240IE5.0/5.5：clientWidth = width - border = 300-102 = 280clientHeight = height - border
7、= 200-102 = 180offsetWidth = width = 300offsetHeight = height = 200HTML控件offsetTop、scrollTop等属性假设 obj 为某个 HTML 控件。obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。我们对前面提到的“上方或上层”与“左方或上层”控件作
8、个说明。例如： “提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。以上属性在 FireFox 中也有效。另 外：我们这里所说的是指 HTML 控件的属性值，并不是 document.body，document.body 的值在不同浏览器中有不同解释（实际上大多数环境是由于对 document.body 解释不同造成的，并不是由于对 offset 解释不同造成的）。
