我的前端工具集(八)获得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

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

  点击测试按钮后

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

以上!

上一篇:【HTML】Html页面跳转的5种方式


下一篇:初学JavaSE