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

燮羽天翔

浏览: 110092 次
性别:
来自: 北京

最近访客更多访客>>

anyihhy

jack1007

xjq2011

Tom.X

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript CSS IE XHTML HTML

在学习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>

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

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

　　c、关于offsetParent的实例：

<!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">
#outer{position:absolute;}
</style>
<scripttype="text/javascript">
window.onload=function(){
　　vartarget=document.getElementById('target');
　　varouter=document.getElementById('outer');
　　alert(target.offsetParent==outer);　　//true
};
</script>
</head>
<body>
<divid="outer"class="test">
　　<divid="inner">
　　　　<divid="target"class="test">Target<br/>rainman</div>
　　</div>
</div>
</body>
</html>
　　
<!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">
</style>
<scripttype="text/javascript">
window.onload=function(){
　　vartarget=document.getElementById('target');
　　alert(target.offsetParent==document.body);　　//true
};
</script>
</head>
<body>
<divid="outer"class="test">
　　<divid="inner">
　　　　<divid="target"class="test">Target<br/>rainman</div>
　　</div>
</div>
</body>
</html>

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是比较理想的方法。

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

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

function getX(elem){
　　var x=0;
　　while(elem){
　　　　x=x+elem.offsetLeft;
　　　　elem=elem.offsetParent;
　　}
　　return x;
}
function getY(elem){
　　var y=0;
　　while(elem){
　　　　y=y+elem.offsetTop;
　　　　elem=elem.offsetParent;
　　}
　　return y;
}

转载自:http://tech.ddvip.com/web/javascript/index.html

分享到：

javascript获得元素的尺寸和位置二 : clien ... | 基于 REST 的 Web 服务：基础

2009-09-02 21:16
浏览 1831
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论