offsetParent:离当前元素最激动呢一个有定位的父节点

如果没有定位父级，默认是body

IE7以下如果当前元素没有定位默认是body，如果有定位就是html

IE7以下，如果当前元素的某个父级出发了layout，(zoom: 1;)

那么offsetParent就会被指向到那个触发layout的父节点上

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

div {padding: 40px 50px;}

#div1 {background: red;}

#div2 {background: green; zoom: 1;}

#div3 {background: orange;}

</style>

<script>

window.onload = function() {

	var oDiv3 = document.getElementById('div3');

	//parentNode : 父节点

	//alert( oDiv3.parentNode.id );

	/*alert( document.getElementById('div2').currentStyle.hasLayout );*/

	alert( oDiv3.offsetParent.id );

}

</script>

</head>

<body id="body1">

	<div id="div1">

    	<div id="div2">

        	<div id="div3"></div>

        </div>

    </div>

</body>

</html>

JS-offsetParent定位父节点的更多相关文章

  1. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

  2. js中获取父节点,兄弟节点及处理属性节点

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...

  4. javascript好文---深入理解定位父级offsetParent及偏移大小

    前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...

  5. jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    一, js 获取元素(父节点,子节点,兄弟节点)   var test = document.getElementById("test"); var parent = test.p ...

  6. offsetParent() 返回第一个匹配元素用于定位的父节点。

    offsetParent() V1.2.6概述 返回第一个匹配元素用于定位的父节点. 这返回父元素中第一个其position设为relative或者absolute的元素.此方法仅对可见元素有效.大理 ...

  7. JS获取子节点、父节点和兄弟节点的方法实例总结

    转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...

  8. 深入理解定位父级offsetParent及偏移大小

    前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...

  9. JS获取与遍历节点的兄弟父级

    发布:脚本学堂/JavaScript  编辑:JB01   2014-01-23 15:40:11  [大 中 小] 介绍下js获取节点的兄弟.父级与子元素的方法,学习下js遍历节点的操作方法,有需要 ...

随机推荐

  1. c#委托和事件的介绍

    委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递.事件是一种特殊的委托. (1). delegate delegate我们常用到的一种声明   Delegate至少0个参 ...

  2. nagios二次开发（六）---nagiosql原理及主要文件的介绍

    nagiosql的入口文件:index.php,这也是所有php程序的入口文件.是由apache指定的. index.php 文件的开始引入了 require("functions/prep ...

  3. Linux下JDK、Tomcat

    1.JDK的安装   1. 下载JDK 先查看Linux系统是多少位(32位/64位):getconf  LONG_BIT.再从JDK官网(http://www.oracle.com/technetw ...

  4. Pureftpd

    在lnmp目录下运行./pureftpd.sh 如下:[root@cloud lnmp1.3-full]# 执行./pureftpd.sh 使用命令 Install Pure-FTPd complet ...

  5. VPN服务器是什么？

    可能很多人听到VPN的第一感觉是它是一个FQ的工具,然而并不是酱紫的. 虚拟专用网(Virtual Private Network,简称VPN),是一种常用于连接中.大型企业或团体与团体间的私人网络的 ...

  6. Ubuntu如何更新源

    Ubuntu的源其实就是更新各种软件包需要用到镜像网站, 当大家在虚拟机上安装Linux镜像的时候肯定会遇到各种Linux软件没有安装,当你用apt-get安装的时候它会提示无效的网址,这个时候你就需 ...

  7. form表单提交路径action="" 时的一种特殊情况

    一.说明: 当页面的form表达的action=""时,表示表单会提交到当前页面,但是如果当前页面的URL里已经带有一个参数了,每次提交表达时这个参数依然存在,不管form表单里有 ...

  8. matlab 连续读取多个文件

    方法1: 把文件的文件名按一定的规律命名,假如:filename1.txt,filename2.txt,...,fielname100.txt,在读取的时候则可以使用循环: for i = 1:100 ...

  9. shell编程之流程控制

    -d 判断该文件是否存在,并且是否为目录文件 -e 判断该文件是否存在 -f 判断该文件是否存在,并且是否为普通文件 形式 [ -e   /home/cao/test.txt ] -r 文件 判断该文 ...

  10. shell编程之运算符

    declare声明变量类型 declare    [+ / -] [选项]  变量名 - :给变量设定类型属性 + :取消变量的类型属性 -a :将变量声明为数组型 -i :将变量声明为整数型 -x ...