parentNode和offsetParent的使用
来源:互联网 发布:jquery移除数组元素 编辑:程序博客网 时间:2024/05/03 19:33
元素.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和标准的IE下是这样滴:
在我们的老祖宗IE6下……呵呵呵呵。
再来,给div2加上zoom(触发haslayout),把div3的相对定位去掉:
#div2 {background: green;zoom:1; }
在IE6下又是这样的(在标准浏览器下是正常的,指向body):
原因,在IE6下有一套叫做haslayout的东西(其实好多CSS的兼容性问题都是这个东东引起的)。
综上,parentNote和offsetParent的区别是:parentNote指当前元素的父级,offsetParent则是指当前元素最近的定位父级,存在很多兼容性问题,且用且谨慎。
0 0
- parentNode和offsetParent的使用
- parentNode 、 offsetParent父节点
- offsetParent与parentElement ,parentNode,parentElement,childNodes和children
- offsetParent与parentElement ,parentNode,parentElement,childNodes和children
- offsetParent的使用
- parentNode,childNodes、children 的使用
- parentNode,childNodes、children 的使用
- parentElement和parentNode的区别
- offsetParent和parentElement的区别
- offsetParent和parentElement的区别
- ParentNode.append和Node.appendChild的区别
- [转]offsetParent和parentElement的区别
- [JavaScript][转]offsetParent和parentElement的区别
- parentElement 和 offsetParent 之间的区别
- 使用parentNode 代替 parentElement
- parentNode的问题
- js parentNode的应用
- 关于定位、浮动、z-index 和 offsetParent 的一些概念
- IOS 学习八 代码创建UIButton
- C语言指针学习一
- cp和scp
- 【Rails】有关TDD测试入门
- python正则表达式的简单使用
- parentNode和offsetParent的使用
- Shell基础-Bash基本功能-多命令顺序执行与管道符
- 深度解读LinkedIn收购Lyndacom之敢问路在何方
- loadView、viewDidLoad及viewDidUnload的关系
- [Ruby on Rails Tutorial]01-使用Heroku部署应用程序
- Centos 6.6安装google chrome 出现/usr/lib/libstdc++.so.6: version `GLIBCXX_3.4.15' not found 蹩脚解决方法
- Android Activity 降低屏幕亮度 Android开发
- iOS库--.a与.framework
- JS实现关闭当前子窗口,刷新父窗口及调用父窗口的方法