您的位置：首页 > Web前端 > JavaScript

js中offsetParent，offsetLeft的兼容问题

2015-08-11 16:14 633 查看

一、offsetParent

先简单的来个结构,三个嵌套的div，主要是找div3的offsetParent

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin: 0;padding: 0}
div {padding: 50px}
#div1 {background: red}
#div2 {background: green}
#div3 {background: blue}
</style>
</head>
<body>
<div id="div1">div1
<div id="div2">div2
<div id="div3">
div3
</div>
</div>
</div>
<script type="text/javascript">
var oDiv3=document.getElementById('div3');
alert(oDiv3.offsetParent)
</script>
</body>
</html>

offsetParent不像parentNode那样性格好，它有许多情况需要分析。

1、在标准浏览器下（火狐，chrome，ie8及以上）：

（1）div3所以祖先节点都没有定位的情况下，offsetParent是body

（2）div3的所有祖先节点中，如果有节点存在定位属性时，则offsetParent就是有定位祖先节点，并且遵循就近原则，即假如div1，div2都存在定位，则div3的offsetParent是div2，部分绝对定位或者相对定位。这个就不贴图了，可以自己测试。

（3）假如div2设置了

position

，但是div1设置了zoom：1，触发了

haslayout

百度一下，你就知道了

但最终还是有position的元素是offsetParent，毕竟这是在标准下！！

2、ie6、7下，(⊙o⊙)…凡是碰到ie6、7的都会忍不住‘’哎‘’

分为div3自身是否有定位。

（1）自身有定位：

①所有祖先节点无定位，则offsetParent是html，如果祖先节点有定位，则还是遵循标准的，则offsetParent是有定位的父级。

②即使祖先节点有触发

haslayout

可以用设置zoom：1触发，也可以用其他来触发。

（2）本身无定位

当div3的所有祖先节点中，如果有触发haslayout，那么offsetParent就是那个触发了haslayout的节点，即使有节点设置了定位，毕竟这是在非标准下。

如果无处发、无定位，则是body

晕了半会儿，继续说offsetLeft

二、offsetLeft（当前元素到offsetParent的距离）

1、在标准浏览器下：

（1）如果offsetParent是body的话，那么offsetLeft是元素到html的左距离

（2）如果offsetParent是有定位的元素，那么offsetLeft是元素到定位元素的距离。

2、非标准下：准备%>_<%吧

（1）当前元素无定位：

①祖先节点无定位，offsetLeft是元素到body的距离

②祖先节点的定位，是绝对还是相对，所产生的offsetLeft也是不一样的。

③会受到haslayout的影响

（2）当前元素有定位：

①不会受到haslayout的影响

②父节点无定位，则offsetLeft是元素到html的距离。

三、总结（随着时光的流逝，我相信不会再分非标准了）

好吧，两个东西，却扯出了这么多兼容问题，反正我头已经打大了，可恶的ie啊！！所以在写代码的时候，要注意这两点：

1、html和body保持一样的样式，这个只要书写规范，一般都可以做到。

2、在ie低版本中，给当前元素加相对定位。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript offsetLeft offsetPare

相关文章推荐

新的分享

章节导航