要素の配置参照要素と配置値の取得(JavaScriptとjQuery)

8260 ワード
JavaScript
JavaScript要素の位置決め参照要素と位置決め値の取得方法
1.offsetParent取得要素の位置決め参照要素
    element.offsetParent 
2.offsetLeft要素から参照要素を位置決めする左の距離を取得する
    element.offsetLeft 
3.offsetTop要素の位置決め参照要素の上距離を取得する
    element.offsetTop   



	
	Document
	


	

		box
		

			box1
			

				box2
			

		

	

	
		//   ， box2     box    ，        ，box1 box2 parentNode.
		//     
		var box2 = document.getElementById("box2");
		//        
		console.log(box2.offsetParent)
		//   box2 box     
		console.log("offsetLeft   :" + box2.offsetLeft) 
		//               
		//   box2 box     
		console.log("offsetTop   :" + box2.offsetTop)   
		//

注意:
offsetLeft、offsetTopは、要素を取得して参照要素を位置決めする距離ですが、高度なブラウザとIEブラウザでは互換性の違いがあります.
拡張ブラウザ:offsetLeft、offsetTopは、要素の外枠から位置決め参照要素の枠内(位置決め参照要素の枠線値を除く)です.
IEブラウザ:offsetLeft、offsetTopは要素の外枠から位置決め参照要素の外枠外(位置決め参照要素の外枠値を含む)



	
	Document
	


	

		box
		

			box1
		

			box2
		

		

	

	
		//   ， box2     box    ，        ，box1 box2 parentNode.
		//     
		var box2 = document.getElementById("box2");
		//   box2 box     
		console.log("offsetLeft   :" + box2.offsetLeft) 
		//               
		//   box2 box     
		console.log("offsetTop   :" + box2.offsetTop)   
		//               

		//  ：
		//     offsetLeft offsetTop
			//                      
		//IE   offsetLeft offsetTop 
			//

4.拡張ブラウザとIEブラウザを互換するoffset方法:
offset関数:
この方法は、ドキュメントまたは上部までの要素の距離を取得するために使用します.
測位親要素を取得し、測位値を取得し、bodyまで測位親要素の測位親要素を取得し続け、距離が加算されますが、IEでは、親要素の外枠を無視し、拡張ブラウザでは、親要素の外枠を追加します.
関数を定義し、関数の内部にleft topを含むオブジェクトを定義します.whileループを使用してdomをoffsetParentに向け続け、offsetLeftとclientLeft(offsetTopとclientTop)を累積させます.IE(親要素の枠線を追加する必要はありません)、bodyまでループが終了し、オブジェクトに戻ります.



	
	Document
	


	

	

		

	

	
	
		//        ，       ，       ，      left top  
		//   ：        ，      
		//               ，      
		//                     ，     ，  body         。
		function offset(dom) {
			//      
			var isIE8 = false;
			//        
			var str = window.navigator.userAgent;
			//      
			if (str.indexOf("MSIE 8.0") === -1) {
				// console.log("  IE8")
				isIE8 = false;
			} else {
				// console.log(" IE8")
			 	 isIE8 = true;
			}
			// for (; dom != document.body; dom = offsetParent)
			
			//     
			var result = {
				left: dom.offsetLeft,
				top: dom.offsetTop
			}
			//   while  
			while (dom != document.body) {
				//        
				dom = dom.offsetParent;
				//   
				if (isIE8) {
					//    IE8            
					result.left += dom.offsetLeft;
					result.top += dom.offsetTop;
				} else {
					//   IE8          
					result.left += dom.offsetLeft + dom.clientLeft;
					result.top += dom.offsetTop + dom.clientTop;
				}
			}
			//     
			return result;
		}

		//   box2
		var box2 = document.getElementById("box2");
		//   
		var result = offset(box2);
		console.log(result)


		// jquery  
		console.log($("#box2").offset())

总结：

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




	
	Document
	


	

		box
		

			box1
		

			box2
		

		

	

	
	
		//   ， box2     box    ，        ，box1 box2 parentNode.
		console.log($("#box2").offsetParent());	
		console.log($("#box2").position());

まとめ
:
$(dom).posiiton()
エレメントの配置参照エレメントのオフセット値の取得
$(dom).offset()
ドキュメント/上部/bodyへの要素のオフセット値の取得
[アルゴリズム]2種類の質量数を求めるアルゴリズム(窮挙法,スクリーニング法),C言語で実現
jQueryのDataTableでのパラメータの詳細とcolumnsのプロパティの説明