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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
#target
{ position:relative; }
</style>
<script type="text/javascript">
window.onload 
= function(){
    
var target = document.getElementById('target');
    alert(target.offsetParent 
== document.documentElement);        //IE中指向<html>元素
    alert(target.offsetParent == document.body);    //FF、Safari等指向<body>元素
};
</script>
</head>

<body>
<div id="outer" class="test">
    
<div id="inner">
        
<div id="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的实例:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
#outer 
{ position:absolute;}
</style>
<script type="text/javascript">
window.onload 
= function(){
    
var target = document.getElementById('target');
    
var outer = document.getElementById('outer');
    alert(target.offsetParent 
== outer);    //true
};
</script>
</head>

<body>
<div id="outer" class="test">
    
<div id="inner">
        
<div id="target" class="test">Target<br />rainman</div>
    
</div>
</div>
</body>
</html>

 

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload 
= function(){
    
var target = document.getElementById('target');
    alert(target.offsetParent 
== document.body);    //true
};
</script>
</head>

<body>
<div id="outer" class="test">
    
<div id="inner">
        
<div id="target" class="test">Target<br />rainman</div>
    
</div>
</div>
</body>
</html>

 

2、offsetLeft/Top

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

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

   代码:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rain Man</title>
<style type="text/css">
*
{margin:0px; padding:0px;}
.test
{
    padding
:5px;
    margin
:10px;
    color
:#fff;
    border
:7px solid #000;
    background-color
:#CC66FF;
}
#target
{
    position
:absolute;
    left
:3px;
    top
:9px;
    width
:100px;
    height
:100px;
}
#outer
{
    position
:relative;
    width
:300px;
    height
:300px;    
}
</style>
<script type="text/javascript">

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

<body>
<div id="outer" class="test">
    
<div id="inner">
        
<div id="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];
    
else  if (window.getComputedStyle)
        typeface 
=  window.getComputedStyle(elem ,  null )[type];
    
return  typeface;        
}

 

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

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

 

你可能感兴趣的:(offsetwidth)