浅谈js中的offset
程序员文章站
2022-06-02 22:16:58
...
先看一张图，比较清晰的可以看到offset的使用：
offsetHeight: 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
注意一点：
以上图片是针对offsetParent的情况，也就是说父元素要position:relative
请看一下代码：
<!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>offset</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position:relative;
margin: 40px;
overflow: hidden;
}
.mydiv {
width: 100px;
height: 120px;
padding: 20px;
border: 2px solid #ccc;
margin: 20px 30px;
}
</style>
<body>
<div class="box">
<div class="mydiv" id="myDiv"></div>
</div>
<script>
var mydiv = document.getElementById('myDiv');
// offsetHeight 元素垂直方向占用的空间大小 包括元素的高度+水平滚动轴高度+边框高度
console.log(mydiv.offsetHeight); // 输出164 计算为 120+20+20+2+2 = 164
// offsetWidth 元素在水平方向上占用的空间大小，以像素计。
// 包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
console.log(mydiv.offsetWidth); // 输出 144 计算为 100+20+20+2+2 = 144
// offsetTop
console.log(mydiv.offsetTop); // 输出 20
// offsetLeft
console.log(mydiv.offsetLeft); // 输出 30
</script>
</body>
</html>如果父元素没有写position，在看结果：
<!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>offset</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 40px;
overflow: hidden;
}
.mydiv {
width: 100px;
height: 120px;
padding: 20px;
border: 2px solid #ccc;
margin: 20px 30px;
}
</style>
<body>
<div class="box">
<div class="mydiv" id="myDiv"></div>
</div>
<script>
var mydiv = document.getElementById('myDiv');
// offsetHeight 元素垂直方向占用的空间大小 包括元素的高度+水平滚动轴高度+边框高度
console.log(mydiv.offsetHeight); // 输出164 计算为 120+20+20+2+2 = 164
// offsetWidth 元素在水平方向上占用的空间大小，以像素计。
// 包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
console.log(mydiv.offsetWidth); // 输出 144 计算为 100+20+20+2+2 = 144
// offsetTop
console.log(mydiv.offsetTop); // 输出 60
// offsetLeft
console.log(mydiv.offsetLeft); // 输出 70
</script>
</body>
</html>这时就是body到该元素的距离。
这点做此记录，让自己不要忘记。
借鉴了一些：https://blog.csdn.net/weixin_37861326/article/details/81453593