offset系列属性 | 作用 |
---|
element.offsetParent | 返回作为该元素带有定位的父级元素,如果父级元素都没有定位返回body |
element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
element.offsetLeft | 返回元素相对带有定位父元素左边框的偏移 |
element.offsetWidth | 返回自身包括padding、边框、内容去的宽度,返回数值不带单位 |
element.offsetHeight | 返回包括padding、边框、内容区的高度,返回值不带单位 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
margin: 150px;
}
.son {
width: 150px;
height: 150px;
background-color: purple;
margin-left: 45px;
}
.w {
height: 200px;
background-color: pink;
margin:0 5px;
padding: 10px;
border: 15px solid red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="w"></div>
<script>
var father=document.querySelector('.father');
var son=document.querySelector('.son')
console.log(father.offsetTop);
console.log(father.offsetLeft);
console.log(son.offsetLeft);
console.log(son.offsetTop);
var w=document.querySelector('.w');
console.log(w.offsetWidth);
console.log(w.offsetHeight);
console.log(son.offsetParent);
</script>
</body>
</html>