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. javascript中event汇总

    原文:javascript中event汇总 ie firefox chrome opera Safari浏览器中对 event的处理并不一致,在此我将各个浏览器中event的兼容处理做了一个汇总,此处 ...

  2. 理解JavaScript继承

    原文:理解JavaScript继承 对于JavaScript的继承和原型链,虽然之前自己看了书也听了session,但还是一直觉得云里雾里,不禁感叹JavaScript真是一门神奇的语言.这次经过Sp ...

  3. 【百度地图API】如何根据摩卡托坐标进行POI查询，和计算两点距离

    原文:[百度地图API]如何根据摩卡托坐标进行POI查询,和计算两点距离 摘要: 百度地图API有两种坐标系,一种是百度经纬度,一种是摩卡托坐标系.在本章你将学会: 1.如何相互转换这两种坐标: 2. ...

  4. 编译 & 预处理

    编译(compilation , compile) 1.利用编译程序从源语言编写的源程序产生目标程序的过程. 2.用编译程序产生目标程序的动作. 编译就是把高级语言变成计算机可以识别的2进制语言,计算 ...

  5. Introducing Visual Studio’s Emulator for Android

    visual studio 2015支持Android开发了. Microsoft released Visual Studio 2015 Preview this week and with it ...

  6. Hadoop与HBase中遇到的问题(续)java.io.IOException: Non-increasing Bloom keys异常

    在使用Bulkload向HBase导入数据中, 自己编写Map与使用KeyValueSortReducer生成HFile时, 出现了以下的异常: java.io.IOException: Non-in ...

  7. sqlite学习笔记5：插入数据，查询数据和删除数据

    曾闻:全部的编程都是已数据为中心,觉得很有道理. 所谓数据库数据库,没有数据叫什么数据库,接下来就看看怎样在表中插入数据. 一 插入数据 1 创建一张表 首先为了插入数据,须要先创建一张表: CREA ...

  8. linux c socket programming

    原文:linux c socket programming http://54min.com/post/http-client-examples-using-c.html 好文章 PPT http:/ ...

  9. [顶]ORACLE PL/SQL编程详解之二：PL/SQL块结构和组成元素(为山九仞，岂一日之功)

    原文:[顶]ORACLE PL/SQL编程详解之二:PL/SQL块结构和组成元素(为山九仞,岂一日之功) [顶]ORACLE PL/SQL编程详解之二: PL/SQL块结构和组成元素(为山九仞,岂一日 ...

  10. Javascript轮播 支持平滑和渐隐两种效果

    Javascript轮播 支持平滑和渐隐两种效果 先上两种轮播效果:渐隐和移动   效果一:渐隐 1 2 3 4 效果二:移动 1 2 3 4 接下来,我们来大致说下整个轮播的思路: 一.先来看简单的 ...