DOM基础二

最新推荐文章于 2023-04-22 17:47:07 发布

Mr Gong

最新推荐文章于 2023-04-22 17:47:07 发布

阅读量223

点赞数

分类专栏： DOM 文章标签： dom

本文链接：https://blog.csdn.net/GYZ_Code/article/details/76147868

版权

DOM 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

元素的偏移位置

<!DOCTYPE html>
<html lang="en" id="html">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <style type="text/css">
        body{margin:0;}
        #div1{width: 200px;height: 200px;background: #f00;padding:100px;margin:60px 0 0 60px;position: relative;}
        #div2{width: 100px;height: 100px;background: #ff0;padding: 50px;position: relative;}
        #div3{width: 100px;height: 100px;background: #ccc;position: relative;}
    </style>
</head>
<body id="body">

    <div id="div1">

        <div id="div2">

            <div id="div3"></div>

        </div>

    </div>
    <!-- 

            元素.offsetParent  只读 属性   返回离该元素最近的定位父级，如果没有定位父级，默认是body

            1）在IE7以下，自身有定位且没有定位父级的时候，默认是HTML

            2）在IE7以下，自身没有定位且没有定位父级，但有某个父级触发了hasLayout的时候，offsetParent就会被指向到这个触发了hasLayout特性的父节点

            元素.offsetLeft/offsetTop：只读 属性 返回元素的水平偏移位置/返回元素的垂直偏移位置

        我们再给一个元素设置定位的时候，最好也要明确其定位父级，避免兼容性的问题

     -->

<script>

 var oDiv3=document.getElementById('div3');

/* alert(document.getElementById('div2').currentStyle.hasLayout);//true
 console.log(oDiv3.offsetParent.id);*/


console.log(oDiv3.offsetLeft);

console.log(oDiv3.offsetTop);

</script>
</body>
</html>