获取元素的定位参考元素和定位值（JavaScript 和 jQuery）

JavaScript获取元素的定位参考元素和定位值方法

1. offsetParent 获取元素的定位参考元素

    element.offsetParent 

2. offsetLeft 获取元素到定位参考元素的左边距离

    element.offsetLeft 

3. offsetTop 获取元素的定位参考元素的上边距离

    element.offsetTop  

	
	
	


	

		box
		

			box1
			

				box2
			
		
	
	

注意：

offsetLeft 、offsetTop 都是获取元素到定位参考元素的距离，但是在高级浏览器和IE浏览器中有兼容性区别

    高级浏览器：offsetLeft 、offsetTop 是元素的外边框到定位参考元素的边框内（不包括定位参考元素的边框值）

    IE浏览器：offsetLeft 、offsetTop 是元素的外边框到定位参考元素的边框外（包括定位参考元素的边框值）

	
	
	


	

		box
		

			box1
		

			box2
		
		
	
	

4. 兼容高级浏览器和IE浏览器的offset方法：

    offset函数：

    此方法用于获取一个元素到文档或者顶部的距离

    获取定位父元素， 再获取定位值， 继续获取定位父元素的定位父元素， 直到body 然后距离相累加，但是在IE中，忽略父元素外边框， 在高级浏览器中，要加上父元素的外边框。

 定义一个函数， 在函数内部定义一个对象， 对象中包含left top。用while循环， 让dom不断指向 offsetParent，循环让offsetLeft 和 clientLeft （offsetTop 和 clientTop）不断累加。 IE(不需要加上父元素的边框)， 直到body， 循环结束，返回该对象。

总结：

element.offsetLeft	获取元素到定位参考元素的左边距离
element.offsetTop	获取元素到定位参考元素的上边距离
兼容性书写offset(dom)	获取元素到文档或者顶部body的距离（返回值是有left和top属性的对象）

jQuery获取元素的定位参考元素和定位值方法

1. offsetParent() 获取元素的定位参考元素

    $(dom).offsetParent()

2. position() 获取元素的定位参考元素的偏移值

    $(dom).position()

    返回值为有left和top属性的对象

    $(dom).position().left

    $(dom).position().top

3. offset() 获取元素到文档/顶部/body的偏移值

    $(dom).offset()

    返回值为有left和top属性的对象

    $(dom).offset().left

    $(dom).offset().top

	
	
	


	

		box
		

			box1
		

			box2
		
		
	
	
	

总结 ：

$(dom).posiiton()	获取元素的定位参考元素的偏移值
$(dom).offset()	获取元素到文档/顶部/body的偏移值