一. offset是什么
- offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小(宽度高度)
- 返回的数值都不带单位
offect系列常用属性:
返回任何一个元素的高度包括边框(border)和内边距(padding),但不包含外边距(margin) | |
返回元素的宽度,包括边框(border)和内边距(padding),但不包含外边距(margin) | |
返回当前元素的相对带有定位父元素水平偏移位置的偏移容器 | |
返回元素的偏移容器 带有定位的父级元素,如果父级都没有定位则返回body | |
返回当前元素的相对带有定位父元素垂直偏移位置的偏移容器 |
可以得到元素的偏移,位置,返回不带单位的数值
1.element.offsetTop
2.element.offsetLeft
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
let father = document.querySelector('.father');
console.log(father.offsetTop);
console.log(father.offsetLeft);
有这样一个例子
只有父元素,这时候我们打印一下父元素的偏移量,都是100,可见是和我们设置的margin是有关的
如果margin改成了200像素,那么元素偏移量也会动态的变成200px
这个时候我们在父盒子的内部加一个子盒子来看一下它的元素偏移量
.son {
width: 100px;
height: 100px;
background-color: skyblue;
margin-left: 45px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
let father = document.querySelector('.father');
let son = document.querySelector('.son');
//可以得到元素的偏移,位置,返回不带单位的数值
console.log(son.offsetTop);
console.log(son.offsetLeft);
如图所示:顶部偏移量为100,左侧偏移量是145,这个145是父盒子距离左侧偏移量再加上子盒子距离父盒子的左侧偏移量得到的,并没有以父盒子为基准,而是以子盒子为基准的偏移量,那为什么不是45呢,子盒子不是在父盒子中的吗,这个时候要注意:
它以带有定位的父盒子为准,如果没有父盒子或者父盒子没有定位,则以body为准
我们尝试一下给父盒子加上相对定位
那么就变成了0 和45
可以得到元素的大小高度和宽度
3.element.offsetHeigh
4.element.offsetWidth
.one {
width: 200px;
height: 200px;
background-color: blueviolet;
margin-left: 100px;
}
</style>
<div class="one"></div>
//可以得到元素的大小高度和宽度
let one = document.querySelector('.one');
console.log(one.offsetWidth);
console.log(one.offsetHeight);
此时设置的200高度和宽度都是一致的,那么 如果加上padding值呢.padding值会撑大盒子,那么大小会不会发生变化呢?
我们给他加上20px的padding值,左右两侧的padding值加一起再加上宽度就是240,高度同理
padding会撑大盒子,盒子的大小会发生变化,那么再加上border呢,我们尝试一下
就变成了260px,他加上了border的值,所以我们要注意:
element.offsetHeigh 和 element.offsetWidth 变化的时候是包含padding和border和width/heigth的
他不包含margin哦
5.element.offsetParent
返回元素的偏移容器 带有定位的父级元素,如果父级都没有定位则返回body |
根据刚刚的案例,带有父元素的是son盒子,那么我们来打印一下son
console.log(son.offsetParent);
父级元素带有相对定位
父级元素不带有相对定位
提起返回父级元素,我们之前也学过一个返回父级元素的属性
console.log(son.parentNode);
这两个都是返回的父级元素,那他们的区别是什么呢?
- son.parentNode ,返回的是最近一级的父级元素,不管父级元素有没有定位
- element.offsetParent 带有定位的父级元素,如果父级都没有定位则返回body