你的位置:首页 > Java教程

[Java教程]js的offsetParent属性用法详解


js的offsetParent属性用法详解:
此属性是javascript中较为常用的属性,对于它的良好掌握也是非常有必要的,下面就通过代码实例介绍一下它的用法,希望能够给需要的朋友带来一定的帮助。
一.基本介绍:
此属性可以返回距离指定元素最近的采用定位(position属性值为fixed、relative或者absolute)父级元素,如果父级元素中没有采用定位的元素,则返回body对象的引用。
语法结构:

obj.offsetParent

二.代码实例:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#main{ width:300px; height:300px; position:relative; background:red;}#box{ width:200px; height:200px; background:blue;}#inner{ width:50px; height:50px; background:green; text-align:center; line-height:50px;}</style><script type="text/javascript">window.onload=function(){ var inner=document.getElementById("inner"); inner.innerHTML=inner.offsetParent.id;}</script></head><body><div id="main"> <div id="box">  <div id="inner"></div> </div></div></body></html>

以上代码可以将inner元素的第一个定位的父级元素的id属性值写入自身。

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#main{ width:300px; height:300px; background:red;}#box{ width:200px; height:200px; background:blue;}#inner{ width:50px; height:50px; background:green; text-align:center; line-height:50px;}</style><script type="text/javascript">window.onload=function(){ var inner=document.getElementById("inner"); inner.innerHTML=inner.offsetParent.id;}</script></head><body id="thebody"><div id="main"> <div id="box">  <div id="inner"></div> </div></div></body></html>

在以上代码中,因为inner元素的父级元素中没有采用定位的元素,所以offsetParent属性将会返回body对象的引用,所以会将body对象的id属性值写入inner元素。
特别说明:
1.在IE7浏览器中,offsetParent将会返回第一级父元素对象的引用。
2.如果定位的父级元素的display属性值为none,则此属性返回值为null。

原文地址是:js的offsetParent属性用法详解