关闭

获得当前元素的绝对位值

235人阅读 评论(0) 收藏 举报

     自己抄别人的

 

 在网页设计中经常要得到元素的绝对位值,以便让自己弹出的层不在页面上变形。所以我们要得到点击元素的绝对坐标。在看阿里的js的时候,看到一个,能支持三种浏览器,所以在下边贴以下:
调用的方法很简单:
<input type="button" onclick="Show(this)" id="Button2" value="clickMe" /><br />

<script type="text/javascript">
    
function Show(checkEl)
    { 
         document.getElementById(
"tishiDiv").style.display = "block";
      document.getElementById(
"tishiDiv").style.position = "absolute";
      document.getElementById(
"tishiDiv").style.top = getXY(checkEl)[1]+12+"px";
      document.getElementById(
"tishiDiv").style.left = getXY(checkEl)[0]-10+"px";
        
    }
    
/**
 * 获取对象el的X,Y坐标
 * @param {Object} el
 
*/
function getXY(el){
  
var pos;
  
if(this.getExplorerType()==1){
    
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
    pos 
= [el.getBoundingClientRect().left+scrollLeft, el.getBoundingClientRect().top+scrollTop];
  }
else{
    pos 
= [el.offsetLeft, el.offsetTop];
    
var parentNode = el.offsetParent;
    
if (parentNode != el) {
      
while (parentNode) {
        pos[
0+= parentNode.offsetLeft;
        pos[
1+= parentNode.offsetTop;
        parentNode 
= parentNode.offsetParent;
      }
    }
    
if (el.parentNode) { parentNode = el.parentNode; }
    
else { parentNode = null; }
            
    
while (parentNode && parentNode.tagName.toUpperCase() != 'BODY' && parentNode.tagName.toUpperCase() != 'HTML'){
      
if (parentNode.style.display != 'inline') {
        pos[
0-= parentNode.scrollLeft;
        pos[
1-= parentNode.scrollTop;
      }

      
if (parentNode.parentNode) {
        parentNode 
= parentNode.parentNode; 
      } 
else { parentNode = null; }
    }
  }
  
return pos;
}
function getExplorerType(){
  
var ua = navigator.userAgent.toLowerCase();
  
if(window.ActiveXObject){
    
return 1;
  }
else if((ua.indexOf('firefox')>-1)){
    
return 2;
  }
else if((ua.indexOf('opera')>-1)){
    
return 3;
  }
}
    
</script>
 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:87719次
    • 积分:1825
    • 等级:
    • 排名:千里之外
    • 原创:94篇
    • 转载:15篇
    • 译文:0篇
    • 评论:12条
    最新评论