原文链接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属性，这个属性是什么？的更多相关文章

  1. map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

    var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); // roots的值为[1, 2, 3], numbers的值仍为[1, 4, ...

  2. JS事件 什么是事件？JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...

  3. javascript判断一个元素是另外一个元素的子元素

    javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等. function isParent (obj,parentObj){ w ...

  4. JS对象 指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

    指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. 语法: arrayObject.join(分隔符) 参数说明: 注意:返回 ...

  5. 怎么使用jquery判断一个元素是否含有一个指定的类（class）

    在jQuery中可以使用2种方法来判断一个元素是否包含一个确定的类(class).两种方法有着相同的功能.2种方法如下:(个人喜欢用hasClass()) 1.           hasClass( ...

  6. 如何使用jquery判断一个元素是否含有一个指定的类（class）

    如何使用jquery判断一个元素是否含有一个指定的类(class) 一.总结 一句话总结:可以用hasClass方法(专用)和is方法 1.is(expr|obj|ele|fn)的方法几个参数表示什么 ...

  7. js 获取任意一个元素的任意一个样式属性的值

    //谷歌,火狐支持console.log(window.getComputedStyle(my$("dv"),null).left);//IE8支持console.log(my$( ...

  8. HashMap通过hashcode对其内容进行快速查找，而 TreeMap中所有的元素都保持着某种固定的顺序

    HashMap通过hashcode对其内容进行快速查找,而 TreeMap中所有的元素都保持着某种固定的顺序,如果你需要得到一个有序的结果你就应该使用TreeMap(HashMap中元素的排列顺序是不 ...

  9. JS对象 Array 数组对象 数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的

    Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个"下标",用来表示它在数组中的位置,是从零开始的 数组定义的方法: 1. 定 ...

随机推荐

  1. String、StringBuffer和StringBuilder的区别及应用场景

    1. 运行速度:StringBulider>StringBuffer>String String为什么运行行慢呢? String:字符串常量 StringBuffer.StringBuli ...

  2. iOS常用算法

    1.冒泡排序 冒泡算法是一种基础的排序算法,这种算法会重复的比较数组中相邻的两个元素,如果一个元素比另一个元素大/小,那么就交换这两个元素的位置.重复一直比较到最后一个元素. 1.最差时间复杂度:O( ...

  3. ASP.NET项目答辩系统课件使用中的问题记录

    使用软件:VS2008 模块一:登录模块 1-08 问题:显示属性“background”不是元素"td"的有效属性 解决:style="background-image ...

  4. StringBuilder

    在程序开发过程中,我们常常碰到字符串连接的情况,方便和直接的方式是通过"+"符号来实现,但是这种方式达到目的的效率比较低,且每执行一次都会创建一个String对象,即耗时,又浪费空 ...

  5. git教程：版本退回

    转载:版本回退 现在,你已经学会了修改文件,然后把修改提交到Git版本库,现在,再练习一次,修改readme.txt文件如下: Git is a distributed version control ...

  6. VS2010与Matlab2010b混合编程

    环境: 1.VS2010 2.MATLAB 2010b 3.WINDOW 7 (X64) 1.Matlab环境设置 要建立独立运行的C应用程序,系统中需要安装Matlab.Matlab编译器.C/C+ ...

  7. 锦囊9-if语句

    [程序描述] 编写程序,通过使用 if...elif...else 语句判断数字是正数.负数或零: [程序分析] 正数.负数或零的判断非常简单,只需要判断这个数是否大于零,小于零或者等于零.由于判断的 ...

  8. parallel::ForkManager

    use Parallel::ForkManager; my $MAX_PROCESSES=10;   #申明最大进程数(一次创建的进程越多,越耗内存): my $pm = new Parallel:: ...

  9. Dictionary用法

    https://www.cgjoy.com/thread-106639-1-1.html 1.新建字典,添加元素  dictionary<string,string>dic=newdict ...

  10. 日常遇错之Unable to save settings: Failed to save settings. Please restart PyCharm

    将工程的.ideas目录删掉,重启pycharm即可.