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. Android json 数据解析

    1.json格式 2.json解析 3.gson解析 4.fastjson解析 一.Json格式 json一种轻量级的数据交换格式.在网络上传输交换数据一般用xml, json. 两种结构: 1)对象 ...

  2. C#最实用的快捷键

    Ctrl+J(Alt+→):智能提示. Ctrl+X:删除整行. Shift+Alt+Enter:全屏切换 F12:跳转到定义. Ctrl+-.Ctrl+Shift+-:上一步.下一步(仅限于使用过上 ...

  3. cocos2dx实现单机版三国杀(一)

    首先需要一个UI交互类 GameUI   -layer 一个游戏驱动类,负责游戏逻辑的循环 暂时定为GameScene- scene GameScene obj 调用update 更新游戏,addch ...

  4. Java常用类库(三) : HashSet和LinkedList特点简析

    今天内容: l  浅撩HashSet集合元素不可重复的原理 l  使用LinkedList模拟栈和队列 1.浅撩HashSet集合元素不可重复的原理 我们知道HashSet是添加不了相同的元素的,其原 ...

  5. 给网站添加运行时间的JavaScript完整代码

    function secondToDate(second) { if (!second) { return 0; } var time = new Array(0, 0, 0, 0, 0); if ( ...

  6. 使用adb命令提示端口被占用

    图是我的65535端口被占用了,一般adb默认使用的是5037端口##方式一   5037为adb默认端口,若5037端口被占用,查看占用端口的进程(使用命令netstat -aon|findstr ...

  7. Linux(centOS7.2)+node+express初体验

    赶着阿里云服务器老用户服务器半折的好时机,手痒买了一个低配. 想着对于低配用Linux应该比较好(无可视化界面) 于是选择安装了centOs7.2: 我是通过SecureCRT进行远程连接的(如何操作 ...

  8. dubbo之路由规则

    向注册中心写入路由规则:(通常由监控中心或治理中心的页面完成) RegistryFactory registryFactory = ExtensionLoader.getExtensionLoader ...

  9. java_io学习_编码

    package io; public class encodingDemo{ public static void main(String[] args) throws Exception{ // T ...

  10. [HNOI2004]宠物收养所 题解

    一杯茶,一包烟,一道水题调一天 题面 这题一眼看上去就是个裸板子对吧 本来以为要两棵splay,读了一下题发现店里只能有一种生物(人/宠物) 所以记录一下当前店里的状态就行了 老年手速20min过编译 ...