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. 【洛谷4396/BZOJ3236】[AHOI2013]作业（莫队+分块/树状数组/线段树）

    题目: 洛谷4396 BZOJ3236(权限) 这题似乎BZOJ上数据强一些? 分析: 这题真的是--一言难尽 发现题面里没说权值的范围,怕出锅就写了离散化.后来经过面向数据编程(以及膜神犇代码)知道 ...

  2. 【洛谷3224/BZOJ2733】[HNOI2012]永无乡 (Splay启发式合并)

    题目: 洛谷3224 分析: 这题一看\(n\leq100000\)的范围就知道可以暴力地用\(O(nlogn)\)数据结构乱搞啊-- 每个联通块建一棵Splay树,查询就是Splay查询第k大的模板 ...

  3. ACM_开挂的小G

    开挂的小G Time Limit: 2000/1000ms (Java/Others) Problem Description: 小G寒假在家没网络,闲着没事干又看不下书,就玩起了单机游戏ACM_Ga ...

  4. 10.Nodes and Bindings

    节点数据绑定 节点是构成Ventuz场景的基本元素.每个节点既属于图层.也属于层级或内容.既可以在图层编辑器,也可以在层级编辑器或内容编辑器中编辑. 内容节点包括资产描述(如材质.xml文件等).数字 ...

  5. 使用淘宝ip地址库开放接口在网站上显示当前用户所在的城市省份网络（完整代码）

    查看效果:每天进步网  在网站的页脚 <p>欢迎来自 <?php function GetIpCity() {$realip = '';$unknown = 'unknown';if ...

  6. linux 安装 mongo

    整个安装过程:下载安装包--> 解压,添加系统路径(是滴,不用安装解压即可) --> 创建数据目录 --> 启动mongod服务 --> 运行mongo 1.下载安装包 Mon ...

  7. Less——less基本使用

    基本概况 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充.Less 可以运行在 Node.浏览器 ...

  8. 仿win8磁贴界面以及功能

    做移动产品界面占很大的一部分,同时也是决定一款产品好的的重要因素,最近看见有人放win8的界面效果,搜了两款,一款是只是仿界面没有特效,另一款是自定义组件能够实现反转效果,今天分析一下这两类界面. 仿 ...

  9. Win32编程笔记

    我都决定了目前不再接触这些个浪费精力的API了,结果为了DirectX编程我特么又回来了.....微软你的东西真是坑人 以前用这玩意的时候需要什么就查,查完就忘了,这次记一记,以后再用也不至于忘的太离 ...

  10. OpenCV：使用OpenCV3随机森林进行统计特征多类分析

    原文链接:在opencv3中的机器学习算法练习:对OCR进行分类 本文贴出的代码为自己的训练集所用,作为参考.可运行demo程序请拜访原作者. CNN作为图像识别和检测器,在分析物体结构分布的多类识别 ...