javascript获得元素的尺寸和位置

阅读更多

在学习 offset的相关属性前,必须明确指出offsetHeight/Width、offsetTop/offsetLeft等返回的都是只读的并且以数字 的形式返回像素值(例如,返回12,而不是'12px')。

  定位父元素:指在CSS中某一元素 domElement[position:relative/absolute]所相对定位的元素。

  1、offsetParent

   对于offsetParent来讲,最重要的是能够知道 domElement.offsetParent 指向的是哪个元素。然而对于这一点不同的浏览器之间有一些微妙的差异。

  a、domElement设置了 position:relative/absolute属性:

     domElement.offsetParent指向的是该元素的定位父元素。

     但也有一个bug,见一下代码:





RainMan

#target{position:relative;}


window.onload=function(){
   vartarget=document.getElementById('target');
   alert(target.offsetParent==document.documentElement);    //IE中指 向元素
  alert(target.offsetParent==document.body);  //FF、 Safari等指向元素
};




   
     Target
rainman


   



 

 b、 domElement没有设置position:relative/absolute,即static:

     这一点所有的浏览器基本相同,domElement的offsetParent指向的是离domElement最近的拥有 position:relative/absolute属性的父级元素。若不存在,则指向 元素。但这种情况也有例外,如果domElement是则 offsetparent 指向

  c、关于offsetParent的实例:





RainMan

#outer{position:absolute;}


window.onload=function(){
   vartarget=document.getElementById('target');
   varouter=document.getElementById('outer');
   alert(target.offsetParent==outer);  //true
};




   
     Target
rainman
   



  




RainMan



window.onload=function(){
   vartarget=document.getElementById('target');
   alert(target.offsetParent==document.body);  //true
};




   
     Target
rainman
   


 

2、 offsetLeft/Top

  offsetLeft: 该元素左border的左边缘 到 该元素的offsetParent的左border内边缘的水平距离。

  offsetTop:该元素的上border的上边缘 到 该元素的offsetParent的上border内边缘的垂直距离。

  代码:





RainMan

*{margin:0px;padding:0px;}
.test{
   padding:5px;
  margin:10px;
  color:#fff;
   border:7pxsolid#000;
  background-color:#CC66FF;
}
#target{
   position:absolute;
  left:3px;
  top:9px;
  width:100px;
   height:100px;
}
#outer{
  position:relative;
  width:300px;
   height:300px;  
}


window.onload=function(){
   vartarget=document.getElementById('target');
   alert(target.offsetLeft);  //13=margin-10px+left-3px
};




   
     Target
rainman
   


   3、offsetWidth/offsetHeight

  给出元素在页面中占据的宽度和高度的总计。注意:把元素的边框和滚动条计算在 内。

   offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width;
  
   offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width; 

  4、相关应用

  a、获得一个元素的实际宽度和高度,例如: 一个自适应高度的段落,往往可以通过获得该元素CSS层叠后的最终高度【见下代码】,但是这种方法在IE中有时返回的是auto,所以使用一个元素的 offsetWidth/offsetHeight是比较理想的方法。

functiongetStyle(elem,type){
   vartypeface='';
  if(elem.currentStyle)
     typeface=elem.currentStyle[type];
  elseif(window.getComputedStyle)
     typeface=window.getComputedStyle(elem,null)[type];
   returntypeface;    
}

  获得一个元素位置的可移植的方法:在窗口中的位置

functiongetX(elem){
   varx=0;
  while(elem){
    x=x+elem.offsetLeft;
     elem=elem.offsetParent;
  }
  returnx;
}
functiongetY(elem){
   vary=0;
  while(elem){
    y=y+elem.offsetTop;
     elem=elem.offsetParent;
  }
  returny;
}

 

你可能感兴趣的:(JavaScript,CSS,IE,XHTML,HTML)