parentNode和offsetParent的使用

最新推荐文章于 2024-04-28 08:32:47 发布

我的IP在路上

最新推荐文章于 2024-04-28 08:32:47 发布

阅读量3.3k

点赞数

分类专栏： web前端笔记文章标签： parentNode 父节点元素

本文链接：https://blog.csdn.net/u012552049/article/details/45390181

版权

web前端笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

元素.parentNode：只读属性，指当前元素的父级节点
offsetParent：只读属性离当前元素最近的一个有定位属性的父节点
如果没有定位父级，默认是body，有兼容性问题。

先上parentNode:
例一：点击隐藏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</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>
<script>
    var oUl=document.getElementById("ul1");
    var aA=oUl.getElementsByTagName("a");
    for(var i=0;i<aA.length;i++){
        aA[i].onclick=function(){
            this.parentNode.style.display="none";
        }
    }
</script>
</html>

效果如下：经过测试parentNode没有什么兼容性问题，可以大胆使用。

这里写图片描述

offsetParent：只读属性离当前元素最近的一个有定位属性的父节点
如果没有定位父级，默认是body
Ie7以下，如果当前元素没有定位默认是body，如果有定位则是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;}
#div2 {background: green; }
#div3 {background: orange;}
</style>
<script>
window.onload = function() {
    var oDiv3 = document.getElementById('div3');        
    alert("定位父级的id是："+ oDiv3.offsetParent.id +" "+"定位父级的节点是："+oDiv3.offsetParent.tagName);}
</script>
</head>
<body id="body1">
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>
</html>

没有加定位父级的时候，在各下是这样的：定位父级默认是body。IE也一样。

这里写图片描述

下面我们给div3加上相对定位：

#div3{background: green; position：relative;}

在chrome，safari，firefox和标准的ＩＥ下是这样滴：

这里写图片描述

在我们的老祖宗IE6下……呵呵呵呵。

这里写图片描述

再来，给div2加上zoom（触发haslayout），把div3的相对定位去掉：

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

在IE6下又是这样的（在标准浏览器下是正常的，指向body）：

这里写图片描述

原因，在IE6下有一套叫做haslayout的东西（其实好多CSS的兼容性问题都是这个东东引起的）。

综上，parentNote和offsetParent的区别是：parentNote指当前元素的父级，offsetParent则是指当前元素最近的定位父级，存在很多兼容性问题，且用且谨慎。

我的IP在路上

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
parentNode和offsetParent的使用

parentNode和offsetParent的使用
复制链接

扫一扫

专栏目录

parentNode和offsetParent的使用

“相关推荐”对你有帮助么？