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. 【PostgreSQL-9.6.3】事件触发器

    当预定的事件发生时,事件触发器就会被触发.由于事件触发器设计的权限比较大,所以只有超级用户才能创建和修改触发器. 1. 事件触发器支持的事件分三类:ddl_command_start, ddl_com ...

  2. CNN结构：色彩空间建模-色彩空间分析

    原文: 色彩空间基础 好一个NB的知乎专栏:色彩空间基础 第一章:色彩空间基础 关于色彩分析,引出了专门的数学基础.整个过程给出了完备的数学阐述,虽然没有试验数据,论述的相当精彩. 摘抄出一段:  上 ...

  3. Gradle与Makefile构建工具的对比

    随着Android Studio的普及,越来越多的Android开发者也要开始了解和学习Gradle这款强大的代码构建工具了.我们在学习和了解一项新事物的时候,最快速的方法往往是与已知的事物进行比较, ...

  4. DDX DDV 用法

    DDX:Dialog Data Exchange 如果使用DDX机制,一般会在OnInitDialog消息处理函数或Dialog构造函数中,为对话框对象的成员变量设置了初始值.在对话框显示前,框架的D ...

  5. CAD通过扩展记录实体向数据库读写用户自定义的全局数据（com接口VB语言）

    VB代码实现如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...

  6. SpringMVC与MyBatis整合方法

    一.springmvc+mybaits的系统架构: 第一步:整合dao层 mybatis和spring整合,通过spring管理mapper接口. 使用mapper的扫描器自动扫描mapper接口在s ...

  7. PAT (Advanced Level) Practice（更新中）

    Source: PAT (Advanced Level) Practice Reference: [1]胡凡,曾磊.算法笔记[M].机械工业出版社.2016.7 Outline: 基础数据结构: 线性 ...

  8. Opencv学习之路——自己编写的HOG算法

    #include<opencv2\core\core.hpp> #include<opencv2\highgui\highgui.hpp> #include<opencv ...

  9. (C/C++学习)9.C/C++优化排序

    说明:在C/C++中常见的排序方法有两种,第一种为选择排序法,第二种为冒泡排序法,本文将对这两种排序法进行优化,并给出一种更为快捷的排序法. 一.未优化的排序法 现在假如要对一个数组进行排序,假设这个 ...

  10. Google Cloud SSH 连接配置

    设置当前用户及root用户的密码 sudo passwd xx-user # 输入新密码 sudo passwd root # 输入新密码(建议保持一样) 在本地生成私钥和公钥 cd ~/.ssh s ...