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

我的前端工具集（八）获得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>")
    }

3.测试结果

　　页面和console

　　点击测试按钮后

以上！