offsetLeft、offsetTop、offsetWidth、offsetHeight……的属性

转自：http://hi.baidu.com/ywjsailor/blog/item/799681303f2b11a05fdf0e6c.html

转自：http://www.jb51.net/article/19029.htm

转自：http://conkeyn.javaeye.com/blog/317333

 

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 + 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

 

scrollWidth, clientWidth与offsetWidth 的区别

 

 

scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。 一个scrollWidth和clientWidth的例子：

 

 

 

Html代码

1. < strong > < div   id = "demo"   
2.     style = "overflow: hidden; width: 460px; color #ffffff; height: 120px" >   
3. < table   height = "120"   cellPadding = "0"   width = "600"   align = "right"   border = "0"   
4.     cellspacing = "0" >   
5.     < tr >   
6.         < td   id = demo1   vAlign = top   width = 543 >   
7.         < table   borderColor = "#ffffff"   cellSpacing = "2"   cellPadding = "0"   
8.             width = "50"   border = "1" >   
9.             < tr >   
10.                 < td > dddd </ td >   
11.             </ tr >   
12.         </ table >   
13.         </ td >   
14.         < td   id = demo2   vAlign = top   width = 47 > </ td >   
15.     </ tr >   
16. </ table >   
17. </ div >   
18. < script   type = "text/javascript " >   
19. var speed  =  1 ;// 速度数值越大速度越慢  
20. demo2.innerHTML  =  demo1 .innerHTML;  
21. function Marquee() {  
22.     if (demo2.offsetWidth  - demo.scrollLeft < = 0) {  
23.         /* scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 */  
24.         demo.scrollLeft - =  demo1 .offsetWidth ;  
25.     } else {  
26.         demo.scrollLeft++;  
27.     }  
28. }  
29. var MyMar  =  setInterval (Marquee, speed);  
30. demo.onmouseover  =  function () {  
31.     clearInterval(MyMar);  
32. }  
33. demo.onmouseout  =  function () {  
34.     MyMar  =  setInterval (Marquee, speed);  
35. }  
36. </ script > </ strong >   

<div id="demo"
	style="overflow: hidden; width: 460px; color #ffffff; height: 120px">
<table height="120" cellPadding="0" width="600" align="right" border="0"
	cellspacing="0">
	<tr>
		<td id=demo1 vAlign=top width=543>
		<table borderColor="#ffffff" cellSpacing="2" cellPadding="0"
			width="50" border="1">
			<tr>
				<td>dddd</td>
			</tr>
		</table>
		</td>
		<td id=demo2 vAlign=top width=47></td>
	</tr>
</table>
</div>
<script type="text/javascript

">
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>

 

 

 

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

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

 

offsetLeft属性
支持的浏览器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
定义：
      返回一个像素数值，它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量。
句法：
      leftDis = element.offsetLeft
      offsetLeft属性在Internet Explorer中的实现存在Bug，无论当前元素的offsetParent属性取值如何，它总是以Body元素为参照物来计算offsetLeft。 幸运的是，这个Bug在Intern Explorer 8 Beta 1中已经修复。仍然需要注意，IE会从Body元素的Left-Border为标准开始计算OffsetLeft，而其他的浏览器将从Left- Margin开始计算。

offsetTop属性
支持的浏览器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
定义：
      返回一个数值，指明了当前元素的上边缘到其offsetTop属性返回的对象的上边缘的距离。
句法：
      topDis = element.offsetTop
      前面对于offsetLeft的Bug也存在于offsetTop属性中，同样，这个Bug在IE 8 Beta 1中也已经修复。

offsetWidth属性
支持的浏览器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
定义：
      当前元素的宽度。
句法：
      elementWidth = element.offsetWidth
      需要指出的是，offsetWidth属性所指的宽度是当前元素的width+padding+border+margin的总和。
offsetHeigth属性
支持的浏览器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
定义：
      当前元素的高度。
句法：
      elementHeight = element.offsetHeight
      同样，offsetWidth属性所指的高度是当前元素的Height+padding+border+margin的总和。

      以上所说的四个属性再加上offsetParent属性其实都不是Dom规范的一部分，但是目前的浏览器都实现了它们，这几个属性也是实现Javascript拖拽功能的核心元素。