获取页面中元素的中心位置
2017-03-18 本文已影响0人
yongningfu
思考如何获取一个dom元素中心中整个页面的位置呢？ 以文档的左上角0, 0开始。这里的话js的api提供了一个比较好的api， getBoundingClientRect。它返回的是一个元素 border到浏览器视扣的上下左右距离对象。给出比较直观的图
Paste_Image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#box1, #box2 {
widtH: 100px;
height: 100px;
margin-bottom: 100px;
margin-left: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="box1">box1</div>
<p>占位符占位符</p>
<div id="box2">box2</div>
<script type="text/javascript">
var rect = document.getElementById("box2").getBoundingClientRect();
console.log(rect.top); //247
console.log(rect.right); //310
console.log(rect.bottom); //349
console.log(rect.left); //208
</script>
</body>
</html>
可以稍微推导一下， 这个由于元素的宽为100px， right 和 left本来应该差100的 但是出现了 310 - 208 = 102, 因为出现了border的影响
注意 margin是不算进去的
所以，现在获取中心的算法就非常简单了
var rect = document.getElementById("box2").getBoundingClientRect();
//中心位置
var center = {
left: rect.left + (rect.right - rect.left) / 2,
top: rect.top + (rect.bottom - rect.top) / 2
}
还有没考虑的么？
当然，之前说了top left right bottom 是相对于视口的，如果页面发生滚动了呢？ 所以我们还需要加上scrollTop scrollLeft
//中心位置
var center = {
left: rect.left + (rect.right - rect.left) / 2,
top: rect.top + (rect.bottom - rect.top) / 2
}
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//最终的 左 和 上位置
center.left = screenLeft + center.left;
center.top = scrollTop + center.top;
下面就把它显示出来吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#box1, #box2 {
widtH: 100px;
height: 100px;
margin-bottom: 100px;
margin-left: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="box1">box1</div>
<p>占位符占位符</p>
<div id="box2">box2</div>
<script type="text/javascript">
var rect = document.getElementById("box2").getBoundingClientRect();
//中心位置
var center = {
left: rect.left + (rect.right - rect.left) / 2,
top: rect.top + (rect.bottom - rect.top) / 2
}
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//最终的 左 和 上位置
center.left = screenLeft + center.left;
center.top = scrollTop + center.top;
var positionString = 'left:'+ center.left + 'px;' + 'top:' + center.top + 'px;';
var newDiv = document.createElement('div');
newDiv.innerHTML = '<div style="position:fixed;' + positionString +
'width: 2px; height: 2px; background: red; border: 1px solid red"></div>';
document.body.appendChild(newDiv);
</script>
</body>
</html>
Paste_Image.png
这个API还是很有意思的
