我的前端工具集（八）获得html元素在页面中的位置-优快云博客

本文介绍了一种通过JavaScript获取HTML元素在页面中位置的方法，并演示了如何利用这些位置信息进行页面特效设计，如添加进度条、提示框等。通过具体代码示例，展示了如何使用jQuery的.offset()方法获取元素的top和left值。

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

我的前端工具集（八）获得html元素在页面中的位置

liuyuhang原创，未经允许禁止转载

我的前端工具集

有时候需要用点击等操作，来获取某元素在页面中的位置，然后在该位置添加某些操作

如进度条，提示框，特效动画等。（bootstrap提示工具也挺好用的）。

1.html代码

    <div style="padding:10px">
        <h2>This is a page to test Postion.</h2>
        <div id="token" style="padding:5px"></div>
        <br>
        <div class="col-lg-3" style="margin-top:20px">
            <button type="button" run="button001" class="btn btn-default" onclick="test(this)">测试</button>
        </div>
    </div>

当然也可以用监听器的方式来获取当前监听对象，如果是用onclick，可使用this方式来获取当前对象。

如果是操作其他元素获取绝对位置，自行写吧还是！

2.js代码

    function test(me){
        var top = $(me).offset().top;//获取该元素相对于浏览器的位置top
        var left = $(me).offset().left;//获取该元素相对于浏览器的位置left
        //var top = $(me).position().top;//获取该元素相对于父元素的位置top
        //var left = $(me).position().left;//获取该元素相对于父元素的位置left
        console.log(top)
        console.log(left)
        //写点内容到刚刚获取到的位置,position:fixed是相对于浏览器定位
        $("body").append("<div style=';position:fixed;top:" + top + ";left:" + left + "'><h3>got it</h3></div>")
    }