获取节点偏移量

原创于 2021-12-08 00:12:26 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css3

JS 专栏收录该内容

91 篇文章

订阅专栏

本文详细讲解如何使用JavaScript获取DOM元素在页面中的偏移量，包括offsetTop、offsetLeft、offsetWidth和offsetHeight的用法，以及在CSS3中的变化和注意事项，对于前端开发者理解元素布局和定位至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*{padding: 0; margin: 0;}
        div{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            margin: 100px;
            padding: 10px;
            position: relative;
        }
        p{
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: rgb(237, 100, 225);
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>

    <script>
        function testOffset(){
            var divEle = document.querySelector('div')
            var pEle = document.querySelector('p')
            console.log( 'divEle.offsetTop ：',divEle.offsetTop, ' divEleoffsetLeft', divEle.offsetLeft ); 
            console.log( 'pEle.offsetTop ：',pEle.offsetTop, 'pEle.setEleoffsetLeft', pEle.offsetLeft ); 
        }

        testOffset()