获得当前元素的绝对位值

原创 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>
 

相关文章推荐

jquery获取元素的值,获取当前对象的父对象等等

更多英语-其他

jquery获取元素的值,获取当前对象的父对象等等

jsp代码: span>input type="hidden" value="1" id="newInfo">input>span> div class="sx_title">a href=...
  • xydyz
  • xydyz
  • 2015年11月09日 10:12
  • 245

面试算法:计算堆栈当前元素的最大值

堆栈的常用操作有, pop 弹出堆栈顶部的元素;push 向堆栈压入一个元素;peek 获得堆栈顶部的元素值,但不弹出堆栈。现在要去你增加一个操作max, 它的作用是返回堆栈当前所有元素中值最大的那个...

js取当前对象的父对象的同级元素的值

js取当前对象的父对象的同级元素的值 jsp代码

JQuery对象与DOM对象相互转换以及JS和JQyery获取<select>元素当前值的方法

JQuery Object and DOM Object option1 option2 option3 JQuery对象和DOM对象不能混肴,J...

js中获取元素的当前位置

js中获取当前位置有如下几种方法: event.offsetWidth, event.offsetHeight, event.clientX, event.clienY, event.scrennX,...

JSP中获得当前应用的相对路径和绝对路径

3.1 JSP中获得当前应用的相对路径和绝对路径    根目录所对应的绝对路径:request.getRequestURI()    文件的绝对路径  :application.getRealPa...

JSP/Servlet中获得当前应用的相对路径和绝对路径

JSP/Servlet中获得当前应用的相对路径和绝对路径 JSP中获得当前应用的相对路径和绝对路径  根目录所对应的绝对路径:request.getRequestURI()  文件的绝对...

win10 uwp 获得元素绝对坐标

有时候需要获得一个元素,相对窗口的坐标,在修改他的位置可以使用。 那么 UWP 如何获得元素坐标? 我提供了一个方法,可以获得元素的坐标。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:获得当前元素的绝对位值
举报原因:
原因补充:

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