您要打印的文件是:最新IT信息-如何获取网页中元素位置

最新IT信息-如何获取网页中元素位置

作者:佚名    转贴自:本站原创    点击数:1233


如何获取网页中元素位置

重庆帝一网络建设专家 http://www.diy88.com.cn

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN>
<HTML> <HEAD> <TITLE> New Document
 </TITLE> <META NAME=Generator CONTENT=EditPlus> 
<META NAME=Author CONTENT=>
 <META NAME=Keywords CONTENT=> 
<META NAME=Description CONTENT=>
<script language=javascript type=text/javascript>   <!--  
// 说明:用 javascript 获取指定页面元素的位置    
来自internet   function getElementPos(elementId)  {
 var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera') != -1);
var isIE = (ua.indexOf('msie') != -1 && !isOpera);  
 // not opera spoof    
 var el = document.getElementById(elementId);
if(el.parentNode === null || el.style.display == 'none')
{         return false;     }
 var parent = null;
var pos = [];      
 var box;       
 if(el.getBoundingClientRect)    //IE 
 {        
 box = el.getBoundingClientRect(); 
 var scrollTop = Math.max
(document.documentElement.scrollTop, document.body.scrollTop);
 var scrollLeft = Math.max
(document.documentElement.scrollLeft, document.body.scrollLeft);
 return {x:box.left + scrollLeft, y:box.top + scrollTop};     
else if(document.getBoxObjectFor)    // gecko
{        
 box = document.getBoxObjectFor(el);
var borderLeft = (el.style.borderLeftWidth)
parseInt(el.style.borderLeftWidth):0; 
var borderTop = (el.style.borderTopWidth)
parseInt(el.style.borderTopWidth):0;
pos = [box.x - borderLeft, box.y - borderTop];     }
else    // safari & opera     
{
pos = [el.offsetLeft, el.offsetTop];          
parent = el.offsetParent; 
if (parent != el) {               
while (parent) {                 
pos[0] += parent.offsetLeft;                 
pos[1] += parent.offsetTop;                
parentparent = parent.offsetParent; 

 }         }         
 if (ua.indexOf('opera') != -1             
 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' ))          
 {  
 pos[0] -= document.body.offsetLeft;
pos[1] -= document.body.offsetTop;         }      }               
 if (el.parentNode) { parent = el.parentNode; }     
else { parent = null; }
while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')
{ // account for any scrolled ancestors
pos[0] -= parent.scrollLeft; 
 pos[1] -= parent.scrollTop;
if (parent.parentNode) { parentparent = parent.parentNode; } 
else { parent = null; }     }   return {x:pos[0], y:pos[1]};   }  
 function showDt(){      var pos=getElementPos(theDt);  
 var obj=document.getElementById(MydtGenerator);    
 var h=parseInt(document.getElementById(theDt).style.height);
obj.style.left=pos.x;   
obj.style.top=pos.y+h;   obj.style.display=''; 
 event.cancelBubble=true;      }    
//-->   </script>   </HEAD>  <BODY>   
<INPUT TYPE=text style=height:25px;
 NAME=theDt id=theDt onclick=showDt();>  
 <div id='MydtGenerator' style=width:
100;height:200px;border:solid 1px red; 
position:absolute;left:0;top:10; z-index:999; 
display:none; onclick=javascript:
event.cancelBubble=true;>test</div>  </BODY> </HTML>