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. Flume OG 与 Flume NG 的对比

    Flume OG 与 Flume NG 的对比 1.Flume OG Flume OG:Flume original generation 即Flume 0.9.x版本,它由agent.collect ...

  2. 8.Layers Editor

    图层编辑 Ventuz5中有两种类型的场景,分别是2D图层和3D图层.3D图层包含Content和Hierarchy,而2D图层只包含Content.默认情况下,图层编辑器显示在Ventuz中的左上角 ...

  3. 关于编辑器对<input>标签报错提示“表单输入没有相关label”的问题

    相信很多朋友在制作表单的时候,我们的编辑器会有下图的相关提示吧 我们发现虽然这样并不影响我们的正常使用,但是看着这样的报错提示总是很让人心烦,那么这到底是为什么呢? 其实,这是因为编辑器建议我们在使用 ...

  4. javaWEB中web.xml配置文件相关

    1.常用节点的执行顺序: context-param -> listenter -> filter -> servlet -> interceptor,其中有多个filter的 ...

  5. Eclipse安装和使用TFS

    第一步下载Tfs插件 去微软官网下载https://www.microsoft.com/en-us/download/details.aspx?id=4240 点击 选择下载 随便放置到一个本地或者服 ...

  6. Quartz.NET 定时任务使用

    class Program { static void Main(string[] args) { StartJob(); Console.ReadKey(); } static void Start ...

  7. strcpy & memcpy区别

    这两个经常使用的函数,主要区别有: strcpy 返回值是char *, strcpy(x1, x2); x1 x2必须都是char* 类型 memcpy(x1, x2, sizeof(xx)); m ...

  8. Opencv学习之路—Opencv下基于HOG特征的KNN算法分类训练

    在计算机视觉研究当中,HOG算法和LBP算法算是基础算法,但是却十分重要.后期很多图像特征提取的算法都是基于HOG和LBP,所以了解和掌握HOG,是学习计算机视觉的前提和基础. HOG算法的原理很多资 ...

  9. 洛谷——P1757 通天之分组背包

    P1757 通天之分组背包 题目背景 直达通天路·小A历险记第二篇 题目描述 自01背包问世之后,小A对此深感兴趣.一天,小A去远游,却发现他的背包不同于01背包,他的物品大致可分为k组,每组中的物品 ...

  10. python 列出出当前目录及所有子目录下的文件

    [root@web1 test]# cat walk.py #!/usr/bin/python # -*- coding: UTF-8 -*- import os for root, dirs, fi ...