offsetParent 属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。

句法：

parentObj = element.offsetParent

变量：

· parentObj 是一个元素的引用，当前元素的偏移量在其中计算。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<script type="text/javascript" language="JavaScript">functionvar=""=</script>

</head>

<body onload="offset_init()">

<div id="parent">

<p id="sonObj">测试OffsetParent属性</p>

</div>

</body>

</html>

测试结果：
       Firefox3："BODY"
       Internet Explorer 7："BODY"
      Opera 9.51："BODY"
      Chrome 0.2："BODY"
      Safari 3："BODY

结论：
        当某个元素及其DOM结构层次中元素都未进行CSS定位时(absolute或者relative)[或者某个元素进行CSS定位时而DOM结构层次中元素都未进行CSS定位时],则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。(其实无论时标准兼容模式还是怪异模式，根元素都为Body元素)

测试代码2

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<style type="text/css">{:;:;:;:;}style>

<script type="text/javascript" language="JavaScript">functionvar=""=</script>

</head>

<body onload="offset_init()">

<div id="parent">div测试代码

<p id="sonObj">测试OffsetParent属性</p>

</div>

</body>

</html>

测试结果：
         Firefox3："DIV"
         Internet Explorer 7："DIV"
        Opera 9.51："DIV"
        Chrome 0.2："DIV"
        Safari 3："DIV"

结论：
      当某个元素的父元素进行了CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为其父元素

测试代码3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<style type="text/css">{:;:;:;:;}style>

<script type="text/javascript" language="JavaScript">functionvar=""=</script>

</head>

<body onload="offset_init()">

<h1 id="Grandfather">

<div id="parent">

<p id="sonObj">测试OffsetParent属性</p>

</div>

</h1>

</body>

</html>

测试结果：
        Firefox3："H1"
        Internet Explorer 7："H1"
       Opera 9.51："H1"
       Chrome 0.2："H1"
       Safari 3："H1"
结论：
         当某个元素及其父元素都未进行CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。

JS OffsetParent属性的更多相关文章

  1. JavaScript问题——在浏览器中每一个元素都有一个offsetParent属性，这个属性是什么？

    原文链接http://www.cnblogs.com/zcjnever/archive/2011/04/21/2023133.html Javascript中的offsetParent属性 支持的浏览 ...

  2. js对象属性 通过点(.) 和 方括号([]) 的不同之处

    //    js对象属性 通过点(.) 和 方括号([]) 的不同之处 //    1.点操作符: 静态的.右侧必须是一个以属性名称命名的简单标识符.属性名用一个标识符来表示.标识符必须直接出现再js ...

  3. js获取属性

    js获取属性的方法: document.getElementById(); document.getElementsByTagname(); document.getElementsByClassna ...

  4. js中属性类型：数据属性与访问器属性

    js中属性类型分为两种:数据属性和访问器属性 在js中,对象都是由名值对构成的,名:就是我们所说的属性名,值就是属性对应的值(基本值.对象.方法). ECMA-262第5版定义了只有内部才用的特性,描 ...

  5. JS中"属性"的用法

    JS的属性和C#有相似之处  ! 使用get和set来进行属性的获取和设置 var obj={ a:"1", get age(){ return obj.a; }, set age ...

  6. JS修改属性，六种数据类型

    JS修改属性 一般修改单个属性是通过JS修改的,比较方便.改多个属性通过css样式改更方便. 1.特殊:通过JS修改包含"-"符号的属性,例如margin-top // 特殊 修改 ...

  7. 动态设置js的属性

    目标:js的属性名能够使用变量 举例:js对象object,当赋给该对象属性的时候能够採用下面方式 var object; object.prop1 = "value1"; obj ...

  8. Vue.js 计算属性是什么

    Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

  9. js实现属性只读

    第一种 Object.defineProperty 这种是在vue源码中看见的 let obj = { $data: {} }; Object.defineProperty(obj, '$data', ...

随机推荐

  1. Delegate,Action,Func,Predicate的使用与区别

    C#4.0推出后,类似Linq,Lamda表达式等许多新的程序写法层次不穷.与之相关的Delegate,Action,Func,Predicate的使用和区别也常常让大家迷惑,此处就结合实际的应用,对 ...

  2. 在Mac电脑上为Dash制作docSet文档

    Dash是mac上的一款查看API的工具,里面能够直接下载大部分的API文档,可是有时候我们假设想把自己手里已有的文档也集成到Dash中,就须要我们自己动手了,事实上Dash官方也有教程怎样制作doc ...

  3. NHibernate构建一个ASP.NET MVC应用程序

    NHibernate构建一个ASP.NET MVC应用程序 什么是Nhibernate? NHibernate是一个面向.NET环境的对象/关系数据库映射工具.对象/关系数据库映射(object/re ...

  4. 表单验证 jquery-validation

    表单验证首选:jquery-validation 参见 http://jqueryvalidation.org/ 下载之后 在 demo  的index 页面有各种API 详细的案例. 还可以参考 h ...

  5. Coreseek:索引和检测的第二步骤施工

    1,非常索引easy,代码行 g:/service/coreseek/bin/indexer -c g:/service/coreseek/etc/csft_mysql.conf   person 在 ...

  6. 一步一步写算法（之prim算法 上）

    原文:一步一步写算法(之prim算法 上) [ 声明:版权所有,欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 前面我们讨论了图的创建.添加.删除和保存等问题.今 ...

  7. java之集合框架使用细节及常用方法

    集合类的由来:   对象用于封装特有数据,对象多了需要存储,如果对象的个数不确定.  就使用集合容器进行存储. 集合特点: 1,用于存储对象的容器. 2,集合的长度是可变的. 3,集合中不可以存储基本 ...

  8. PHP 1:在Windows上安装和配置PHP，Apache和My SQL

    原文:PHP 1:在Windows上安装和配置PHP,Apache和My SQL 如果你Google一把类似的主题,你会发现相关的文章可以塞满你的硬盘.在这里之所以把它再次拿出来,目的是想记录我作为一 ...

  9. HTML5学习资源

    http://www.silverlightchina.net/html/HTML_5/study/ 我们一起学:HTML5标签系列教程(一)-video标签 版权声明:本文博客原创文章.博客,未经同 ...

  10. Mac OSX操作系统安装和配置Zend Server 6教程（3）

    Zend Server安装好以后,在php.ini文件中,没有默认时区.就是导致很多警告信息出现的根本. 接下来,我们看看如果修改这个文件. 首先,进入php.ini文件.此文件在目录zend/etc ...