offset
js中有一套方便的获取元素尺寸的办法就是offset家族
offset包括:
- offsetWidth
- offsetHight
- offsetLeft
- offsetTop
- offsetParent
offsetWidth 和 offsetHight
用于检测盒子自身的宽高+padding+border,不包括margin
offsetWidth = width + padding + border;
offsetHeight = Height + padding + border;
这两个属性,他们绑定在了所有的节点元素上
获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
width: 200px;
height: 300px;
color: blue;
border: 20px solid greenyellow;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<div class="d1">
Hello World
</div>
<script>
var d1 = document.querySelector(".d1");
console.log(d1.offsetWidth);
//340 = 200 + 2*50 + 2*20
console.log(d1.offsetHeight);
//440 = 300 + 2*50 + 2*20
</script>
</body>
</html>
offsetLeft 和 offsetTop
返回距离上级盒子(带有定位)左边的位置;如果父级都没有定位,则以浏览器为准
offsetLeft:
获取自身左外边框到定位父级的左内边框的距离
offsetTop:
获取自身上外边框到定位父级的上内边框的距离
只能获取不能修改
也就是:
offsetLeft、offsetTop: 父元素的内边距 + 元素的外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.d1{
width: 200px;
height: 300px;
color: blue;
border: 10px solid greenyellow;
padding: 40px;
margin: 20px;
position: relative;
}
.d2{
width: 50px;
height: 100px;
border: blueviolet solid 10px;
margin: 30px;
padding: 20px;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">123</div>
</div>
<script>
var d1 = document.querySelector(".d1");
var d2 = document.querySelector(".d2")
console.log(d2.offsetLeft);
//70 = 40 + 30
console.log([d1]);
</script>
</body>
</html>
offsetParent
检测父系盒子中带有定位的父盒子节点
返回结果是该对象的父级(带有定位)
- 如果当前元素的父级元素,没有CSS定位(position为absolute、relative、fixed),那么offsetParent的返回结果为body
- 如果当前元素的父级元素,有CSS定位(position为absolute、relative、fixed),那么offsetParent的返回结果为最近的那个父级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.d1{
position: absolute;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
<div class="d3">123</div>
</div>
</div>
<div class="d4">
<div class="d5"></div>
</div>
<script>
var d3 = document.querySelector(".d3");
var d5 = document.querySelector(".d5");
console.log(d3.offsetParent);
console.log(d5.offsetParent);
</script>
</body>
</html>
offsetLeft和style.left区别
-
offsetLeft 可以返回没有定位盒子的距离左侧的位置
如果父系盒子中都没有定位,以body为准
style.left 只能获取行内式,如果没有,则返回""(意思是,返回空) -
offsetTop 返回的是数字,而 style.top 返回的是字符串,而且还带有单位:px。
扫描二维码关注公众号,回复: 12441450 查看本文章
div.offsetLeft = 100;
div.style.left = "100px";
-
offsetLeft 和 offsetTop 只读,不可修改;
而 style.left 和 style.top 可读写 -
如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串
总结
用offsetLeft 和 offsetTop 获取值
用style.left 和 style.top 赋值(比较方便)