作家
登录

js parentElement和offsetParent之间的区别

作者: 来源:www.28hudong.com 2013-03-30 01:45:07 阅读 我要评论

首先是 parentElement 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A。 这里主要说的是 offsetParent 属性,这个属性在 MSDN 的文档中也没有解释清楚,这就让人更难理解这个属性。 这几天在网上找了些资料看看,再加上自己的一些测试,对此属性有了那么一点的了解,在这里总结一下。 要明白 offsetParent 属性,要先明白“已定位元素” 这个名字,所谓“已定位元素”就是指给元素设置了 position 属性的样式,并且 position 样式属性的值等于 absolute、relative、fixed 之一的元素。 在使用 offsetParent 属性获取父级对象时有以下两种情况: 1、元素本身已经定位 如果元素本身已经定位,那么 offsetParent 属性返回此元素已定位父级元素,如没有已定位的父级元素,则返回 BODY 对象,例如: 复制代码 代码如下: <body> <p> <div> <span id="obj1" style="position:absolute"></span> </div> <div id="pObj1" style="position:absolute"> <span id="obj2" style="position:absolute"></span> </div> </p> </body> obj1.offsetParent 返回 BODY 对象 obj2.offsetParent 返回 pObj1 对象 2、元素没有定位 如果元素没有定位, offsetParent 不但会找已经定位的父级元素而且还会查找类型为 TD 和 TABLE 的父级元素,只要找到这三种父级元素的其中任何一种元素将返回此元素,否则返回 BODY 对象,例如: 复制代码 代码如下: <table width="500" border="0"> <tr> <td id="td1"> <div id="pObj1"> <span id="obj1"></span> </div> </td> </tr> <tr> <td> <div id="pObj2" style="position:relative"> <span id="obj2"></span> </div> </td> </tr> </table> obj1.offsetParent 返回 td1 对象 obj2.offsetParent 返回 pObj2 对象 在 DOM 元素的属性里,还有 parentNode 这个属性,其实这个属性跟 parentElement 属性是一个意思,parentElement 属性是 IE 特有的,W3C 标准是使用 parentNode 属性,还有 children 和 childNodes, children 是 IE 特有的, childNodes 被其他浏览支持。

  推荐阅读

  网络图片延迟加载实现代码 超越jquery控件

淘宝,QQ,还有当当,亚马逊之类网之类的都有这个效果,原理是分段加载图片,主要用于大型网站节省带宽,可是他们提供的东西压缩混淆看不清,还有的要基于什么雅虎的什么库,总之是很麻烦的,JQ的控件倒是够清晰了,>>>详细阅读


本文标题:js parentElement和offsetParent之间的区别

地址:http://www.17bianji.com/kaifa2/JS/26790.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)