我的前端工具集（八）获得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
点击测试按钮后
以上！
更多专业前端知识，请上 【猿2048】www.mk2048.com
转载：https://blog.csdn.net/whiteGay/article/details/102485545
查看评论