JavaScript问题——在浏览器中每一个元素都有一个offsetParent属性,这个属性是什么?

Posted 在北京要饭次的衡水小代代 (′・ω・`)

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript问题——在浏览器中每一个元素都有一个offsetParent属性,这个属性是什么?相关的知识,希望对你有一定的参考价值。

原文链接http://www.cnblogs.com/zcjnever/archive/2011/04/21/2023133.html

javascript中的offsetParent属性 

支持的浏览器:Internet Explorer 4.0+,Mozilla 
1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ 

总结 :
offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 
如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素;在怪异呈现模式下为body元素)的引用。 
当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null 。 

句法 :
parentObj = element.offsetParent 

变量 
· parentObj 
是一个元素的引用,当前元素的偏移量在其中计算。 

规范 

<script type="text/javascript" language="JavaScript"> 
function offset_init(){ 
  var pElement = document.getElementById("sonObj"); 
  parentObj = pElement.offsetParent; 
  alert(parentObj.tagName); 
} 
</script> 
<body onload="offset_init()"> 
  <div id="parent"> 
    <p id="sonObj">测试OffsetParent属性 
  </div> 
</body> 

测试结果: 
  Firefox3:"BODY" 
  Internet Explorer 7:"BODY" 
  Opera 9.51:"BODY" 
  Chrome 0.2:"BODY" 
  Safari 3:"BODY" 

结论: 

当某个元素及其父元素都未进行CSS定位时,则这个元素的offsetParent属性的取值为根元素。更确切地说,这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为Body元素。(其实无论时标准兼容模式还是怪异模式,根元素都为Body元素) 

 

测试代码2:

<style type="text/css"> 

#parent{ 
  position:absolute;

<!--position:relative;--> 

left:25px; 

top:188px; 
border:1px 
solid black; 
} 
</style> 
<script type="text/javascript" language="JavaScript"> 

function offset_init(){ 
var pElement = 
document.getElementById("sonObj"); 
parentObj = pElement.offsetParent;

alert(parentObj.tagName); 
} 
</script> 

<body onload="offset_init()"> 
<div id="parent">div测试代码<p 
id="sonObj">测试OffsetParent属性</div> 
</body> 

测试结果:
Firefox3:"DIV"
Internet Explorer 7:"DIV"
Opera 9.51:"DIV" 
Chrome 0.2:"DIV"
Safari 3:"DIV"
结论:

当某个元素的父元素进行了CSS定位时(absolute或者relative),则这个元素的offsetParent属性的取值为其父元素。更确切地说,这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为其父元素。

测试代码3:

<style 
type="text/css"> 
#Grandfather{ 
position:relative; 
left:25px;

top:188px; 
border:1px solid black; 
} 
</style>

<script type="text/javascript" language="JavaScript"> 
function 
offset_init(){ 
var pElement = document.getElementById("sonObj");

parentObj = pElement.offsetParent; 
alert(parentObj.tagName); 
}

</script> 

<body onload="offset_init()">

<h1 id="Grandfather"> 
<div id="parent"> 
<p 
id="sonObj">测试OffsetParent属性 
</div> 
</h1>

</body> 

 

测试结果:
Firefox3:"H1"
Internet Explorer 7:"H1" 
Opera 9.51:"H1"
Chrome 0.2:"H1"
Safari 3:"H1"

结论:

当某个元素及其父元素都未进行CSS定位时(absolute或者relative),则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近,并且已进行了CSS定位的元素。

测试代码4:

 

<style type="text/css"> 
#sonObj{ 
position:relative; 
left:25px;

top:188px; 
border:1px solid black; 
} 
</style>

<script type="text/javascript" language="JavaScript"> 
function 
offset_init(){ 
var pElement = document.getElementById("sonObj");

parentObj = pElement.offsetParent; 
alert(parentObj.tagName); 
}

</script> 

<body onload="offset_init()">

<h1 id="Grandfather"> 
<div id="parent"> 
<p 
id="sonObj">测试OffsetParent属性 
</div> 
</h1>

以上是关于JavaScript问题——在浏览器中每一个元素都有一个offsetParent属性,这个属性是什么?的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript数组

JavaScript基础篇分享之三

Xcode怎样查看数组中每一个数的值?

数组(Array)

C语言 怎么计算数组中每一个不同元素出现的次数

数组的学习