原文链接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. 运维seq语法2

    2017-03-02 09:47:42   # seq 1 10结果是1 2 3 4 5 6 7 8 9 10例二:#!/bin/bashfor i in `seq 1 10`;doecho $i;d ...

  2. xcfe桌面快捷键整理

    转载自:https://my.oschina.net/u/565351/blog/502018 commands custom <Alt>F1:xfce4-popup-applicatio ...

  3. JQuery图片自适应窗口轮播图（淡入淡出效果）

    <script>var w = $(window).width();//获取窗口宽度var h = $(window).height();//获取窗口高度 $(".box&quo ...

  4. Hadoop IO

    检测损坏数据的常用方法是第一次进入系统时计算数据的校验和,然后和传输后新生成的校验和进行匹配.若匹配失败,则认为数据被损坏了.常用CRC-32(cyclic redundancy check,循环冗余 ...

  5. 为UITextField增加MaxLength特性

    iOS 实现方案 在 HTML 的世界里,输入框天生就有 MaxLength 属性,可以限制用户输入的最大字符数量 可惜 iOS 上对应的 UITextField 并没有这样方便的属性,只有自己动手来 ...

  6. flask中需要的基本配置信息

    1.秘钥设置: app.secret_key = '随意设置' 2.SQLALCHEMY配置: # 连接数据库 app.config['SQLALCHEMY_DATABASE_URI'] = 'mys ...

  7. scss初学小结（转阮一峰老师SASS用法指南http://www.ruanyifeng.com/blog/2012/06/sass.html）

    1.安装 SASS是Ruby语言写的,但是两者的语法没有关系.不懂Ruby,照样使用.只是必须先安装Ruby,然后再安装SASS. 假定你已经安装好了Ruby,接着在命令行输入下面的命令: gem i ...

  8. 8th week blog

    1.indexof() indexOf()的用法:返回字符中indexof(string)中字串string在父串中首次出现的位置,从0开始,没有返回-1:方便判断和截取字符串!indexOf()定义 ...

  9. jsp的四个作用域page、request、session、application

    1.简单说 page指当前页面.在一个jsp页面里有效 2.request 指从http请求到服务器处理结束,返回响应的整个过程.在这个过程中使用forward方式跳转多个jsp.在这些页面里你都可以 ...

  10. MySQL Sending data导致查询很慢的问题详细分析【转载】

    转自http://blog.csdn.net/yunhua_lee/article/details/8573621 [问题现象] 使用sphinx支持倒排索引,但sphinx从mysql查询源数据的时 ...