zoukankan      html  css  js  c++  java
  • 获取绝对位置

    function getPos(obj){
    	var l=0;
    	var t=0;
    	while(obj){
    	  l+=obj.offsetLeft;
    	  t+=obj.offsetTop;
    	  obj=obj.offsetParent;
    	};
    	return {left:l,top:t};
    }
    

      用一个例子来说明一下:

    这是html代码 

    <div id="box">
            <div>
                <p></p>
            </div>
    </div>
    

      样式:

    #box{500px;height:500px; display:-none;margin:30px; background:red; position:relative;}
    #box div{200px;height:200px; background:#ccc;margin:10px;}
    #box p{100px;height:100px; background:blue; position:absolute;top:10px;left:10px;}
    

      然后大家看JS代码:

            var oBox=document.getElementById('box');
    	var oDiv=oBox.getElementsByTagName('div')[0];
    	var oP=oBox.getElementsByTagName('p')[0];
    	//绝对LEFT	
    	//offsetParent 定位上的父级
    	alert(oP.offsetLeft+oP.offsetParent.offsetLeft);    
    

      

    l+=obj.offsetLeft;
    t+=obj.offsetTop;
    obj=obj.offsetParent;

    这三句话就相当于:l+=obj.offsetParent.offsetLeft;t+=obj.offsetParent.offsetTop;
    如果问题,欢迎大家及时指点,一同交流,共同提高
  • 相关阅读:
    spider
    python 2.X
    django 创建项目
    NameError: name 'pip' is not defined
    异常捕获
    @property
    node-Telnet
    ES6-模块化
    高级排序算法之双路快速排序
    高级排序算法之快速排序
  • 原文地址:https://www.cnblogs.com/wujidns/p/4129606.html
Copyright © 2011-2022 走看看