深入挖掘 offsetParant 元素的判定-HTML教程-爱易网页

深入挖掘 offsetParant 元素的判定

日期：2014-05-17　浏览次数：20918 次

【分享】深入挖掘 offsetParant 元素的判定
在处理某些JS程序的时候，往往会用到一个元素的坐标值，如果，把页面的左上角当作是原点，那么，如何正确的取到一个元素的坐标值呢？一般来说，会采用元素的 offsetLeft 值取得横轴的坐标， offsetTop 值取得纵轴的坐标。某元素 offsetLeft 和 offsetTop 属性值是偏移量没错，关键在于，它针对哪个元素的偏移值？是它的直接父元素吗？…… 其实应该是它的 offsetParent。而且，要求它的确切坐标，也需要递归计算它所有的 offsetParent 的相对坐标值，直到 offsetParent 是null为止。看来，offsetParent 是关键。

对于元素A的offsetParent，W3C标准的 CSSOM 规范，对此作了规定。我们现在就跟据标准挖掘一下，各浏览器到底是不是一致，是不是遵守标准。

如何元素 A 的 offsetParant 元素 B

A是根元素或 BODY 则 offsetParent 元素为null

HTML code

<html id="_html">
<script>
    function op(id) {
       var off = document.getElementById(id);
       return id + " offsetParent : " + (!!off.offsetParent ? off.offsetParent : "null");
    }
    window.onload = function() {
       document.getElementById("info").innerHTML =
               op("_body") + "</br>" + op("_html");
    }
</script>
<body id="_body">
<div id="info"></div>
</body>
</html>

可见，html和body的offsetParent 都不存在。这时，不存在兼容性问题。

A的 position特性计算后的值是 fixed 则 offsetParent元素为null

HTML code

<html id="_html">
<script>
    function op(id) {
       var off = document.getElementById(id);
       return id + " offsetParent : " + (!!off.offsetParent ? off.offsetParent.id : "null");
    }
    window.onload = function() {
       document.getElementById("info").innerHTML =
               op("_fixed");
    }
</script>
<body id="_body">
<div id="_fixed" style="position:fixed;">fixed</div>
<div id="info"></div>
</body>
</html>

此时，存在兼容性问题。
Opera/Chrome/Safari中输出的是：_fixed offsetParent : null
Firefox/IE中会输出：_fixed offsetParent : _body
可见，在Firefox和IE中，固定定位的元素的offsetParent是 BODY 元素，明显是不符合W3C标准的。注意，在IE中 BODY 是默认拥有布局的，BODY是默认触发hasLayout的。

position 特性计算后的值是非 ‘static’ 的祖先元素B

HTML code

<html id="_html">
<script>
    function op(id) {
       var off = document.getElementById(id);
       return id + " offsetParent : " + (!!off.offsetParent ? off.offsetParent.id : "null");
    }
    window.onload = function() {
       document.getElementById("info").innerHTML = op("_normaldiv");
    }
</script>
<body id="_body">
<div id="_positioned" style="position:relative;">
    <div id="second">
       <div id="_normaldiv"></div>
    </div>
</div>
<div id="info"></div>
</body>
</html>

所有浏览器中的输出都是：_normaldiv offsetParent : _positioned
此时无兼容性问题。

修改一下代码，<div id="second">外面再套一个 DIV，并且此 DIV 在IE中触发了hasLayout（设置了 ‘width:100px;’）：

HTML code

<html id="_html">
<script>
    function op(id) {
       var off = document.getElementById(id);
       return id + " offsetParent : " + (!!off.offsetParent ? off.offsetParent.id : "null");
    }
    window.onload = function() {
       document.getElementById("info").innerHTML = op("_normaldiv");
    }
</script>
<body id="_body">
<div id="_pos

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

深入挖掘 offsetParant 元素的判定

相关资料更多>

推荐阅读更多>