文章目录
offset家族概念
offset用于获取元素尺寸(认真看完以下一定会有收获)
offset家族五大属性之offsetWidth 和 offsetHeight
offsetWidth 和 offsetHeight 用于获取对象自身的宽度和高度,包括内容、边距、内边距 。即:offsetWidth = width + border + padding
示例
详解请看注释
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 180px;
background-color: skyblue;
padding: 10px;
border: 1px solid #000;
margin: 20px;
}
</style>
<body>
<div id="box"></div>
<div id="box1" style="width: 200px"></div>
<script>
var box = document.getElementById('box');
console.log(box.offsetWidth); //200 + 10*2 +1*2
console.log(box.offsetHeight); //180 +10*2 +1*2
console.log(box.style.width); //输出为空 只能拿行内的
console.log(box1.style.width);//style.width只对行内样式有效
</script>
</body>
offset家族五大属性之offsetLeft 和 offsetTop
offsetLeft 和offsetTop 表示距离第一个有定位的父级盒子左边和上边的距离。
注意:父盒子必须有定位,如果父盒子没有定位,则最终以body为标准
示例
父盒子无定位
<style>
* {
margin: 0;
padding: 0;
}
#father {
width: 200px;
height: 200px;
background-color: skyblue;
margin: 20px;
}
#box {
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
margin-left: 20px;
}
</style>
<body>
<div id="father">
<div id="box"></div>
</div>
<script>
var box = document.getElementById('box');
//20+20 0+20
console.log(box.offsetLeft,box.offsetTop); //相对于body
</script>
</body>
父盒子有定位
和上面的代码唯一不同之处是父盒子多了一个定位,其余代码都相同
<style>
* {
margin: 0;
padding: 0;
}
#father {
width: 200px;
height: 200px;
background-color: skyblue;
margin: 20px;
/* 父盒子有定位 除了static其余属性值都可以*/
position: absolute;
}
#box {
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
margin-left: 20px;
}
</style>
<body>
<div id="father">
<div id="box"></div>
</div>
<script>
var box = document.getElementById('box');
//20 0
console.log(box.offsetLeft,box.offsetTop); //相对于父盒子
</script>
</body>
offsetLeft 和 offsetTop 总结
offsetLeft offsetTop从父标签的padding开始计算,不包括border。
即:从子盒子边框到父盒子边框的距离(不包括父子盒子边框)
offset家族五大属性之 offsetParent
offsetParent返回当前对象的父级(带有定位)盒子,可能是父级,也可能是爷爷级,也可能是body( 找到第一个就不会往外找了)
示例
这里还展示了offsetParent和parentNode的区别
<style>
* {
margin: 0;
padding: 0;
}
/* 2 */
#father {
width: 200px;
height: 200px;
background-color: skyblue;
margin: 20px;
}
#box {
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
margin-left: 20px;
}
</style>
<body>
<div id="grandf" style="position: absolute;">
<div id="father" >
<div id="son"></div>
</div>
</div>
<script>
var son = document.getElementById('son');
console.log(son.offsetParent);
console.log(son.parentNode); //无论有无定位标签 都是拿到父标签
</script>
</body>
style.***与offset.***的区别
(1)style.left只能获取行内的,而offsetLeft可以获取到所有的
(2)offsetLeft可以返回没有定位盒子距离左侧的位置,而style.left不可以,其职能返回有定位盒子的left
(3)offsetLeft返回的是数字,而style.left返回的是字符串,除了数字之外还带有单位’px’
(4)如果没有给当前元素指定top样式,则style.top返回的是空字符串
(5)offsetLeft是只读的,而style.left是可读写的