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

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

 2010-09-14 13:39:49 来源:WEB开发网   
核心提示:在学习offset的相关属性前,必须明确指出offsetHeight/Width、offsetTop/offsetLeft等返回的都是只读的并且以数字的形式返回像素值(例如,javascript获得元素的尺寸和位置一 : offsetTop/Left、offsetWidth/Height、offsetParent,返回

在学习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,见一下代码:

<!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">
#target{position:relative;}
</style>
<scripttype="text/javascript">
window.onload=function(){
  vartarget=document.getElementById('target');
  alert(target.offsetParent==document.documentElement);    //IE中指向<html>元素
  alert(target.offsetParent==document.body);  //FF、Safari等指向<body>元素
};
</script>
</head>
<body>
<divid="outer"class="test">
  <divid="inner">
    <divid="target"class="test">Target<br/>rainman</div>
  </div>
</div>
</body>
</html>

1 2 3  下一页

Tags:javascript 获得 元素

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