offsetParent是个仅仅读属性，返回近期显示指定位置的容器元素的引用。

假设元素没有指定位置，近期的元素或者根元素（标准模式下是html，怪异模式下是body）就是offsetParent。

当元素的style.display='none'时。offsetParent返回null。

因为offsetTop和offsetLeft是相对于页边距，因此offsetParent是很实用的。

    
浏览器兼容性
     在以WebKit为核心的浏览器上，假设元素是隐藏的（该元素或者上级元素style.display='none'）或者元素自身style.position='fixed'，那么就会返回null。

    在IE（9）上如元素style.position='fixed'，该属性就会返回null。（然而display:none不影响这个浏览器）

<!DOCTYPE html>

<html>

<head>

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

  <title>offsetParent属性</title>

  <style type="text/css">

    div {

      margin: 5px;

    }

    #div11 {

      border: 2px solid #0000ff;

    }

    #div21 {

      position: relative;

      border: 2px solid #ffff00;

    }

    #div30 {

      position: relative;

      border: 2px solid red;

    }

    #div31 {

    }

  </style>

  <script type="text/javascript">

    function initPage() {

      getOffsetParent('div12'); //BODY

      getOffsetParent('div22');//DIV

      getOffsetParent('div32');//BODY

    }

    function getOffsetParent(id) {

      var divEl = document.getElementById(id);

      var el = divEl.offsetParent;

      console.log(el.nodeName);

      console.log('element id is ' + el.getAttribute('id') || '');

    }

  </script>

</head>

<body onload="initPage()">

<div id="div11">

  <div id="div12">測试1</div>

</div>

<div id="div21">

  <div id="div22">測试2</div>

</div>

<div id="div30">

  <div id="div31">

    <div id="div32">測试3</div>

  </div>

</div>

</body>

</html>




js原生offsetParent解析的更多相关文章

  1. js原生的url操作函数，及使用方法。（附：下边还有jquery对url里的中文解码函数）

    js原生的url操作函数,完善的. /*****************************/ /* 动态修改url */ /*****************************/ var ...

  2. zepto.js 源码解析

    http://www.runoob.com/w3cnote/zepto-js-source-analysis.html Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  3. Node.js原生及Express方法实现注册登录原理

    由于本文只是实现其原理,所以没有使用数据库,只是在js里面模拟数据库,当然是种中还是需要用数据库的. 1.node.js原生方法 ①html页面,非常简单,没有一丝美化~我们叫它user.html & ...

  4. JS原生Ajax&Jquery的Ajax技术&Json

    1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个 ...

  5. 15、js 原生基础总结

    Day1 一.什么是JS?   ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...

  6. underscore.js源码解析（五）—— 完结篇

    最近公司各种上线,所以回家略感疲惫就懒得写了,这次我准备把剩下的所有方法全部分析完,可能篇幅过长...那么废话不多说让我们进入正题. 没看过前几篇的可以猛戳这里: underscore.js源码解析( ...

  7. underscore.js源码解析（二）

    前几天我对underscore.js的整体结构做了分析,今天我将针对underscore封装的方法进行具体的分析,代码的一些解释都写在了注释里,那么废话不多说进入今天的正文. 没看过上一篇的可以猛戳这 ...

  8. JS原生Date类型方法的一些冷知识

    ps:由于Date()是js原生函数,不同浏览器的解析器对其实现方式并不同,所以返回值也会有所区别.本文测试未特别申明浏览器的情况下,均是指win7 x64+chrome 44.0.2403.155 ...

  9. 问题集录--JS如何处理和解析Json数据

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...

随机推荐

  1. 【POJ1845】Sumdiv（数论/约数和定理/等比数列二分求和）

    题目: POJ1845 分析: 首先用线性筛把\(A\)分解质因数,得到: \[A=p_1^{a_1}*p_2^{a_2}...*p_n^{a_n} (p_i是质数且a_i>0) \] 则显然\ ...

  2. ACM_水题你信吗

    水题你信吗 Time Limit: 2000/1000ms (Java/Others) Problem Description: 某发最近又认识了很多妹(han)子,可是妹(han)子一多不免有时会忘 ...

  3. 【转】linux下passwd命令设置修改用户密码

    1.passwd 简单说明: 我们已经学会如何添加用户了,所以我们还要学习设置或修改用户的密码:passwd命令的用法也很多,我们只选如下的几个参数加以说明:想了解更多,请参考man passwd或p ...

  4. [转]Window2008站点安全设置，IIS7/IIS7.5中目录执行权限的设置方法

    本文转自:http://blog.snsgou.com/post-510.html 最近帮一个朋友管理Window 2008服务器,发现有个站点是用asp写的,更可怕的是还有传说中的“上传漏洞”,在上 ...

  5. pd_ds 之 hash

    http://attack.cf/?post=23 打个广告....

  6. HTML和CSS网页开发基础

    一 HTML文档结构 HTML文档结构:<html>.<head>.<title>.<body>构成HTML页面中最基本的元素. HTML常用标记:1. ...

  7. 删除过期备份报错RMAN-06207 RMAN-06208解决方案

    RMAN备份日志中出现了警告 日志文件目录如下: [root@erpdbs rmanback]# ll total 88 -rw-r--r-- 1 oraprod dba 81011 Sep 7 22 ...

  8. Oracle基础理论笔记（一）：模式概念

    ---oracle 10g 1.在oracle数据库中,数据对象是以模式为单位进行组织和管理的.模式是指一系列的逻辑数据结构或对象的集合. 2.模式与用户名相对应,一个模式只能对应一个用户,并且该模式 ...

  9. java浅析

    基本结构 1.以字节码的方式运行在虚拟机上,不是直接编译成机器码运行,所以性能上差于 C 但是高于 python这样的解释形语言. 笔者大学期间学习过 汇编和C,工作后使用python,对这两种语言有 ...

  10. Escaping Closures 两点：本质是生命周期标示符

    1.block需要(拷贝)保存: 2.block引用的环境变量需要处理. 相当于oc中的copy block. Escaping Closures A closure is said to escap ...