原文链接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. 在Linux服务器上使用Vbox安装虚拟机

    先去官网(www.virtualbox.org)上下载对应Linux系统的Vbox版本. 我这边用的是Oracle Linux 7系统(KDE安装) 使用rpm安装virtualbox 发现报错,按照 ...

  2. 高性能JavaScript（1）

    ---------------------------------------------------------------------------------------------------- ...

  3. oracle的PDB启动

    /*以管理员身份登录*/sqlplus / as sysdba /*查看CDB的状态*/select status from v$instance; /*开启startup,默认是open*/star ...

  4. HTML入门标签学习

    1.标题:<h1></h1>.<h2></h2>.<h3></h3>.<h4></h4>.<h5& ...

  5. vue css背景图片打包后路径问题

    limit,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录 name,后面是打包后的路径: loader,后面 limit 字段代表图片打包限制,这个限制并不是说 ...

  6. PowerDesigner生成PowerBuilder扩展属性~

      PowerDesigner版本:11.0.0.1363 步骤: 一.打开PowerDesigner新建模型->物理数据模型(Physical Data Model). 二.在常规选项 DBM ...

  7. java数组的定义

    class ArrayDome { public static void main(String[] args) { //元素类型[] 数组名 创建一个 元素类型[元素个数或数组长度] /* 需要一个 ...

  8. 利用 SPICE 分析理解心电图前端中的右腿驱动

      [导读] 心电图(ECG)学是一门将心脏离子去极(ionic depolarization) 后转换为分析用可测量电信号的科学.模拟电子接口到电极/患者设计中最为常见的难题之一便是优化右腿驱动 ( ...

  9. 20164322韩玉婷 -----Exp1 PC平台逆向破解

    Exp1 PC平台逆向破解 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件.该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串.该程序同时包含另一 ...

  10. camelcase-hankerrank

    int camelcase(string s) { int cnt=0; int a; for(int i=0;i<s.size();i++) { a=s[i]; if(65<=a& ...