WEB开发网
开发学院网页设计JavaScript javascript获得元素的尺寸和位置一 : offsetTop/L... 阅读

javascript获得元素的尺寸和位置一 : offsetTop/Left、offsetWidth/Height、offsetParent

 2010-09-14 13:39:49 来源:WEB开发网   
核心提示: 2、offsetLeft/TopoffsetLeft: 该元素左border的左边缘 到 该元素的offsetParent的左border内边缘的水平距离,offsetTop:该元素的上border的上边缘 到 该元素的offsetParent的上border内边缘的垂直距离,javasc

2、offsetLeft/Top

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

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

代码:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>RainMan</title>
<styletype="text/css">
*{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;  
}
</style>
<scripttype="text/javascript">
window.onload=function(){
  vartarget=document.getElementById('target');
  alert(target.offsetLeft);  //13=margin-10px+left-3px
};
</script>
</head>
<body>
<divid="outer"class="test">
  <divid="inner">
    <divid="target"class="test">Target<br/>rainman</div>
  </div>
</div>
</body>
</html>

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;
}

上一页  1 2 3 

Tags:javascript 获得 元素

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接