原文链接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. centos下搭建openstack的环境

    一.准备环境 linux (centos 7.2(C300的虚机) ) java1.8 官网下载tar包 安装前设置环境变量 JAVA_HOME=/usr/lib/jvm/java-1.8.0-ope ...

  2. ajax如何渲染数据

    染数据的方法 1).字符串拼接,  最常用的方法 优点:只进行一次dom回流 缺点:原有dom的事件都会丢失 原因:就在于innerHTML这个属性,这个属性是返回或设置dom中的内容,以字符串形式返 ...

  3. Where do I belong (freeCodeCamp)

    先给数组排序,然后找到指定的值在数组的位置,最后返回位置对应的索引. 举例:where([1,2,3,4], 1.5) 应该返回 1.因为1.5插入到数组[1,2,3,4]后变成[1,1.5,2,3, ...

  4. 在Java中用 . 深层访问JSON数据

    本文介绍Java中解析JSON的一种方法,可以让我们在Java程序中也用x.x.x的形式访问JSON数据中的值. 代码大部分来源非本人,本人在源代码基础上加以修改以使正常运行. 代码: // 将提取方 ...

  5. 使用sed在匹配行之后增加一行数据

    需求:在原来大量的shell文件中,给出了错误信息打印,现在要求打印错误后直接退出脚本. if [ $? -eq 0 ];then echo_green "done!" else ...

  6. 科学计算库Numpy（1）

    Numpy 一,数据结构 数据类型: ndarray import numpy world_alchol = numpy.genfromtxt('world_alchol.txt',delimiter ...

  7. 关于rabbitmq的介绍

    原文转载:http://blog.csdn.net/whycold/article/details/41119807 保护原帖,尊重技术,致敬工匠! 一.简介 MQ全称为Message Queue, ...

  8. jmeter链接数据库

    1.下载jar包“mysql-connector-java-8.0.12”包放入lib文件中 2.启动jemeter,添加线程组 3.在线程组下添加 JDBC Connection Configura ...

  9. git 入门教程

    git 入门教程之协同开发 前面我们已经介绍过远程仓库的相关概念,不过那时并没有深入探讨,只是讲解了如何创建远程仓库以及推送最新工作成果到远程仓库,实际上远程仓库对于团队协同开发很重要,不仅仅是团队协 ...

  10. linux 下 mysql 常用命令

    linux 下 mysql 常用命令   阅读目录 ====================== 1.开启和关闭 1.1.开启 1.2.关闭 1.3.重启 2.登录 2.1.密码明文 2.2.密码密文 ...