元素的尺寸获取
- getBoundingClientRect()
- left 元素左侧距离可视区左侧距离
- top 元素顶部距离可视区顶部距离
- right 元素右侧距离可视区左侧距离
- bottom 元素底部距离可视区顶部距离
- width 可视宽度
- height 可视高度
元素相对可视区的位置（不太兼容）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
height: 500px;
border: 1px solid #000;
}
#box {
background: red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div id="box"></div>
<div></div>
<div></div>
<div></div>
<script>
{
let box = document.querySelector("#box");
box.onclick = function(){
console.log(this.getBoundingClientRect());
};
}
</script>
</body>
</html>
bottom: 元素底部，相对可视区顶部的距离
height: 元素的可视高度
left: 元素的左侧相对于可视区左侧的距离
right: 元素的右侧相对于可视区左侧的距离
top: 元素顶部相对可视区顶部的距离
width: 元素的可视宽度
获取元素相对于页面的位置
getBoundingClientRect()不太兼容，可以借助offset获取元素相对于页面的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box {
margin: 50px auto;
position: relative;
width: 500px;
height: 500px;
border: 1px solid #000;
}
#div {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
padding: 30px;
border: 5px solid #000;
background: red;
}
</style>
</head>
<body>
<div id="box">
<div id="div"></div>
</div>
<script>
{
let div = document.querySelector("#div");
let l = div.offsetLeft; // div 相对于box的距离
l += div.offsetParent.offsetLeft; // box 相对于其父级（可视区）的距离
console.log(l,div.getBoundingClientRect().left);
}
</script>
</body>
</html>
多了0.5，因为offset是老版本方法，很多浏览器没法精确到小数位，但是getBoundingClientRect做了小数位的精确。
注意：要是多层次定位父级，得一层层获取，因此最好这里再封装一下！
封装：获取页面绝对尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
}
#box {
position: relative;
left: 100px;
top: 100px;
width: 500px;
height: 500px;
border: 1px solid #000;
}
#div {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
padding: 30px;
border: 5px solid #000;
background: red;
}
</style>
</head>
<body>
<div id="box">
<div id="div"></div>
</div>
<script>
{
let div = document.querySelector("#div");
console.log(getPageOffset(div));
}
function getPageOffset(el){
let left = el.offsetLeft;
let top = el.offsetTop;
while(el.offsetParent){
el = el.offsetParent;
left += el.offsetLeft + el.clientLeft;
top += el.offsetTop + el.clientTop;
}
return {left,top};
}
</script>
</body>
</html>
为了更加精确加上边框距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
}
#box {
position: relative;
left: 100px;
top:100px;
width: 500px;
height: 500px;
border: 1px solid #000;
}
#div {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
padding: 30px;
border: 5px solid #000;
background: red;
}
</style>
</head>
<body>
<div id="box">
<div id="div"></div>
</div>
<script>
{
let div = document.querySelector("#div");
console.log(getPageOffset(div));
}
function getPageOffset(el){
let left = el.offsetLeft;
let top = el.offsetTop;
while(el.offsetParent){
el = el.offsetParent;
left += el.offsetLeft + el.clientLeft;
top += el.offsetTop + el.clientTop;
}
return {left,top};
}
</script>
</body>
</html>
（后续待补充）
