元素.parentNode : 父节点   只读 属性 当前节点的父级节点 没有兼容性问题 可放心使用

<!DOCTYPE HTML>

<html>

<head>

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

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

<script>

window.onload = function() {

    var aA = document.getElementsByTagName('a');

    for (var i=0; i<aA.length; i++) {

        aA[i].onclick = function() {

            this.parentNode.style.display = 'none';

        }

    }

}

</script>

</head>

<body>

<ul id="ul1">

  <li>11111 <a href="javascript:;">隐藏</a></li>

  <li>22222 <a href="javascript:;">隐藏</a></li>

  <li>33333 <a href="javascript:;">隐藏</a></li>

  <li>44444 <a href="javascript:;">隐藏</a></li>

</ul>

</body>

</html>

元素.offsetParent : 只读 属性

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

<!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;}

#div3 {background: orange;}

</style>

<script>

window.onload = function() {

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

    alert( oDiv3.parentNode.id );//弹出div2

    alert( oDiv3.offsetParent.id );//弹出body1

}

</script>

</head>

<body id="body1">

    <div id="div1">

        <div id="div2">

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

        </div>

    </div>

</body>

</html>

如果有定位父级则弹出父级  若定位多个父级   则弹出离当前元素最近的一个有定位属性的父节点

<!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; position: relative}

#div2 {background: green;position: relative}

#div3 {background: orange;}

</style>

<script>

window.onload = function() {

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

    alert( oDiv3.offsetParent.id );//弹出div2
 } </script> </head> <body id="body1"> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> </body> </html> </html>

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

<!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;}

#div3 {background: orange;position: relative}

</style>

<script>

window.onload = function() {

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

    //alert( oDiv3.parentNode.id );//弹出div2

    alert( oDiv3.offsetParent.tagName );//ie7弹出html IE8以上弹出body

}

</script>

</head>

<body id="body1">

    <div id="div1">

        <div id="div2">

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

        </div>

    </div>

</body>

</html>

</html>

ie7以下，如果当前元素的某个父级触发了layout，那么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; zoom: 1;}

#div2 {background: green;}

#div3 {background: orange;}

</style>

<script>

window.onload = function() {

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

    alert( oDiv3.offsetParent.id );//ie7以下弹出的是div1,其他的弹出是BODY1

}

</script>

</head>

<body id="body1">

    <div id="div1">

        <div id="div2">

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

        </div>

    </div>

</body>

</html>

parentNode，offsetParent的更多相关文章

  1. javascrip中parentNode和offsetParent之间的区别

    首先是 parentNode 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 要明白 off ...

  2. DOM之parentNode与offsetParent

    DOM中有两个属性parentNode和offsetParent,想必区别大家都是知道的,可用法上还是有一些需要注意的地方,尤其是后者,想知道吗?继续往下看咯. parentNode指的是父节点,el ...

  3. jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

  4. parentNode，parentElement,offsetParent

    offsetParent直接的将是影响元素位置的上级element,而parentElement与位置显示无关时dom中的上级element. 例如: <BODY> <div sty ...

  5. offsetParent和parentNode区别

    offsetParent用的最普遍的就是来计算元素在页面中的位置,前面的日志理讲了 通过getBoundingClientRect() 来获取页面中元素的位置,不过这只支持最新的浏览器,如果要兼容像O ...

  6. JavaScript问题——在浏览器中每一个元素都有一个offsetParent属性，这个属性是什么？

    原文链接http://www.cnblogs.com/zcjnever/archive/2011/04/21/2023133.html Javascript中的offsetParent属性 支持的浏览 ...

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

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

  8. js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装

    1. offsetParent  获取的最近的定位的父元素   offsetLeft/offsetTop  是相对于offsetParent的距离 offsetHeight/offsetWidth 获 ...

  9. 1.offsetParent,offsetLeft,offsetTop

    offsetParent <!doctype html> <html> <head> <meta charset="utf-8"> ...

随机推荐

  1. ios二维码扫描

    1.添加AVFoundation.framework框架 2,控制器中实现 //第一步添加AVFoundation.framework框架 #import "ViewController.h ...

  2. supervisor简介

    一什么是supervisor Superviosr是一个UNIX-like系统上的进程监控工具. Supervisor是一个Python开发的client/server系统,可以管理和监控*nix上面 ...

  3. JAVA多线程实现的四种方式

    Java多线程实现方式主要有四种:继承Thread类.实现Runnable接口.实现Callable接口通过FutureTask包装器来创建Thread线程.使用ExecutorService.Cal ...

  4. 使用yum来安装或卸载CentOS图形界面包

    命令行模式安装图形界面 yum grouplist 检查已安装的组 yum groupinstall "X Window System" yum groupinstall &quo ...

  5. 【maven】 pom.xml内容没有错，但一直报错红叉 解决办法

    1.首先看一下下面的这两个项目,一个是新建的,一个是原来的老项目 2.myEcplise中是点击如下图 Maven4MyEcplise, Ecplise中也是右键,只不过点击Mavene而已,两个一样 ...

  6. CSS3-样式继承，层叠管理，文本格式化

  7. Fzu月赛11 老S的旅行计划 dij

    Description 老S在某城市生活的非常不自在,想趁着ICPC举办期间在省内转转.已知老S所在的省有N个城市,M条无向边(对于某一对结点可能出现重边).由于省内的交通相当糟糕,通过某条边所需要花 ...

  8. 从新注册 .DLL CMD 运行regsvr32 *.dll注册该DLL 或 regsvr32 /s *.DLL 求证

    从新注册 .DLL  CMD 运行regsvr32  *.dll注册该DLL  或 regsvr32 /s  *.DLL 求证

  9. BSGS[bzoj2242][bzoj3122]

    数论题. 操作一:直接快速幂就好了. 操作二:我用了exgcd,shy和lyz都喜欢欧拉函数...QAQ最后这块还写错了. 对于ax+by=gcd(a,b)的形式,我们可以把他们变成y'x+p'y=1 ...

  10. http://blog.csdn.net/hitmediaman/article/details/6636402

    http://blog.csdn.net/hitmediaman/article/details/6636402