思考如何獲取一個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的 但是出現(xiàn)了 310 - 208 = 102, 因為出現(xiàn)了border的影響
注意 margin是不算進去的
所以，現(xiàn)在獲取中心的算法就非常簡單了
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 是相對于視口的，如果頁面發(fā)生滾動了呢？ 所以我們還需要加上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還是很有意思的
