获得当前元素的绝对位值

原创 2007年09月12日 18:09:00

     自己抄别人的

 

 在网页设计中经常要得到元素的绝对位值,以便让自己弹出的层不在页面上变形。所以我们要得到点击元素的绝对坐标。在看阿里的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>
 

判断当前获取焦点的元素

test ;$(function() { $(document).on('key...
  • u011500781
  • u011500781
  • 2016年02月19日 13:51
  • 735

jsp中获取界面元素的几个方法

javascript中获取元素方法 1.getElementsByName() 2.getElementsById() servlet中获取 3
  • LClansefengbao
  • LClansefengbao
  • 2014年06月21日 22:44
  • 7059

vue获取当前点击的元素并传值

html:js:zan(e){ var target=event.target; var dataid=e;//(pl.id的值); $(target)//当前点击的dom }...
  • junyu1024
  • junyu1024
  • 2017年12月05日 17:15
  • 472

javascript获取当前点击事件的ID属性值,IE已验证通过

js代码: document.onclick=Hanlder; function Hanlder(e) { e = e || event; var tag = e.srcElement ||...
  • ZuiZaiYingZeJie
  • ZuiZaiYingZeJie
  • 2014年02月28日 09:59
  • 1534

PHP中如何获得数组中指定元素的前一个或后一个元素

方法一:用循环 function getNext(&$array, $curr_key) { $next = 0; reset($array); do { ...
  • stonehan09
  • stonehan09
  • 2017年03月23日 14:59
  • 2578

selenium+Java页面元素定位方法

页面元素定位方法总结WebDriver对象的findElement函数可以用于定位一个页面的元素,findElement可以用于定位多个页面的元素,定位到页面元素需使用webElement对象进行存储...
  • darcy_wyl
  • darcy_wyl
  • 2018年01月21日 14:28
  • 26

JS - 获取元素的值

#JavaScript ##JS - 获取元素的值(三种) ###**getElementById** - 获取单个指定 **id** 属性的元素 ###**getElementByName**...
  • JayceDeng
  • JayceDeng
  • 2016年03月17日 19:23
  • 245

js获取标签元素值

    title    abc    alert(div1.innerText);    alert(document.getElementById("div1").innerText);    a...
  • flynetcn
  • flynetcn
  • 2006年11月25日 16:36
  • 7767

jquery 获取元素内容和值

jquery可以通过text,html,val三种方式获取值,其中text和html是获取innerHTML部分,而val是获取value部分。 1 text:    obj.text()获取元素...
  • liangwenmail
  • liangwenmail
  • 2015年10月02日 21:45
  • 1192

jQuery获取各种html标签的值

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为Select添加...
  • shamao1113
  • shamao1113
  • 2014年12月08日 16:09
  • 2025
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:获得当前元素的绝对位值
举报原因:
原因补充:

(最多只允许输入30个字)