https://www.cnblogs.com/sj1988/p/6600829.html
三大系列:offset、scroll、client
事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制)
offset:抵消;自己的,用于获取元素尺寸。
五个属性:
1.offsetWidth
和offsetHeight
:获取对象自身的宽度和高度,包括内容、边框和内边距,即:offsetWidth = width + border + padding
。
#box{
width: 200px;
height: 200px;
background-color: red;
padding: 10px;
border: 5px solid #449fdb;
margin: 20px;
}
var box = document.getElementById('box');
console.log(box.offsetWidth); //230=200+5*2+10*2
console.log(box.offsetHeight); //230
box.style.width是拿不到行外的属性值的,只能拿到行内的!
2.offsetLeft
和offsetTop
:距离第一个有定位的父级盒子左边的上边的距离。
从父标签的padding开始计算,不包括border,从子盒子边框到父盒子边框。
<div id="father">
<div id="box"></div>
</div>
*{
margin: 0;
padding: 0;
}
#father{
width: 400px;
height: 400px;
background-color: red;
margin: 40px;
overflow: hidden;
/*定位*/
position: relative; //static为没有定位
}
#box{
width: 200px;
height: 150px;
background-color: blue;
padding: 10px;
border: 5px solid #449fdb;
margin-left: 20px;
}
var box = document.getElementById('box');
console.log(box.offsetLeft); //20 = margin-left: 20px
console.log(box.offsetTop); //0 = 没有设置top的值