原文链接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. 单链表sLinkList类，模板类

    sLinkList模板类,单链表代码 /* 该文件按习惯可以分成.h文件和实现的.cpp文件 */ template <class elemType> class sLinkList { ...

  2. 4--TestNG测试报告

    第一:自带测试报告(略) 第二:Reportng测试报告(略) 第三:ExtentReport--extentreports.com (1) pom.xml:不是总的pom,是文件夹下的pom < ...

  3. 基于CDH5.12安装Kylin及官方用例测试

    1 kylin 简介 Apache Kylin是2013年由eBay 在上海的一个中国工程师团队发起的.基于Hadoop大数据平台的开源 OLAP引擎,它采用多维立方体预计算技术,利用空间换时间的方法 ...

  4. PSP耗时

  5. EOS wallet API 报HTTP 400错误

    服务器:192.168.8.144 按照官方的docker方式运行的,因为keosd(钱包)开出来的API只容许本地访问,即: url --request POST --header 'Host: 0 ...

  6. 多线程系列之自己实现一个 lock 锁

    我们面试中经常会被问到多线程相关知识,这一块内容往浅了说大家都会,但是一问到底层实现原理,我们往往就一脸懵逼. 这段时间准备好好学习多线程,接下来会写一系列关于多线程的知识. 我们首先要了解线程,百度 ...

  7. onkeyup+onafterpaste 只能输入数字和小数点

    1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafter ...

  8. hdu 1698 (延迟标记+区间修改+区间求和)

    In the game of DotA, Pudge's meat hook is actually the most horrible thing for most of the heroes. T ...

  9. JavaScript基础之对象属性的检测和枚举

    属性检测 对象作为属性的集合,属性又包括自有属性和继承属性: 检测方法: \__   in运算符: \__ var obj = { x:1 } console.log( 'toString' in o ...

  10. LeetCode 104. Maximum Depth of Binary Tree C++ 解题报告

    104. Maximum Depth of Binary Tree -- Easy 方法 使用递归 /** * Definition for a binary tree node. * struct ...