OFFSET
offset这个属性，英文翻译过来就是偏移量，也即是元素相当于父元素的偏移量，常用于定位以及缓动动画等地方。
offset大致包括offsetTop、offsetLeft、offsetWidth、offsetHeight、offsetParent五个部分，直白的翻译过来分别是上偏移、左偏移、偏移宽度、偏移高度、偏移父级。
-
offsetTop: 元素相对第一个有定位的父元素上方的偏移。（父盒子必须有定位，如果没有最终以body为准）
-
offsetLeft： 元素相对第一个有定位的父元素左边的偏移。（父盒子必须有定位，如果没有最终以body为准）
-
offsetWidth： 自身包括padding 、 边框、内容区的宽度。(width + border + padding)
-
offsetHeight： 自身包括padding、边框、内容去的高度。(height + border + padding)
-
offsetParent： 作为偏移参照点的父级元素,返回当前对象的父级(带有定位)的盒子，可能是父亲或者爷爷，没有定位则取body，都有定位则就近取， 区别与parentNode。
- offsetHeight/offsettWidth = 内容 + 内边距 + 边框, 这对兄弟获得的是数值，直接style.left获得的是字符串且必须在行内设置属性才能获取到（仅包含内容区域）
(I) offsetWidth/offsetHeight
- content + border + padding)
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 200px;
height: 150px;
background-color: red;
padding: 10px;
border: 5px solid #ddd;
margin: 10px;
}
</style>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;"></div>
<script>
var box = document.getElementById("box");
// offsetHeight = 内容 + 内边距 + 边框
console.log("haha");
console.log( box.offsetWidth, box.offsetHeight); //230, 180
console.log( box.style.width, box.style.height);//100px, 100px
</script>
</body>
(II) offsetLeft/offsetTop
- 父盒子必须有定位，如果没有最终以body为准）
father为父级盒子(有定位)
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#father{
width: 400px;
height: 400px;
background-color: red;
margin: 40px;
position: relative;
}
#box{
width: 200px;
height: 150px;
background-color: blue;
padding: 10px;
border: 5px solid #000;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="box"></div>
</div>
<script>
var box = document.getElementById("box");
console.log(box.offsetLeft); //20
console.log(box.offsetTop); //0
</script>
</body>
father没有定位，相对于最外层的body
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#father{
width: 400px;
height: 400px;
background-color: red;
margin: 40px;
/*position: relative;*/
}
#box{
width: 200px;
height: 150px;
background-color: blue;
padding: 10px;
border: 5px solid #000;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="father">
<div id="box"></div>
</div>
<script>
var box = document.getElementById("box");
console.log(box.offsetLeft); //60
console.log(box.offsetTop); //40
</script>
(III) offsetParent
- 返回当前对象的父级(带有定位)的盒子区别与parentNode。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="yeye" style="position: relative;">
<div id="father" >
<div id="son"></div>
</div>
</div>
<script>
var son = document.getElementById("son");
console.log(son.offsetParent); //<div id="yeye" style="position: relative;">
console.log(son.parentNode); //<div id="father" >
</script>
</body>
</html>
(IV) offsetXXX和style.XXX的区别
- 用offsetLeft和style.left来分析，其他以此类推：
a) style.left只能获取行内的，而offsetLeft则可以获取到所有的；
b) offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left;
c) offsetLeft是只读的，而style.left是可读写；
d) 如果没有给 当前 元素指定过 top 样式，则 style.top 返回的是空字符串。
e) offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px;- 注意：可以用parseInt进行转化；比如：styleLeft='300px' ---> parseInt(styleLft) ---> 300
事件对象
在此之前我们接触了很多比如鼠标点击、移入移出等等事件，只要触发DOM上的某个事件时，就会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。考虑兼容性的话可以采取以下写法：
var event = event || window.event;
event常见属性
| 属性 | 用途 | 语法 |
|---|---|---|
| clientX | 返回鼠标在窗口客户区域中的X坐标 | event.clientX |
| clientY | 返回鼠标在窗口客户区域中的Y坐标 | event.clientY |
| screenX | 检测鼠标相对于用户屏幕的水平位置(只读属性) | event.screenX |
| screenY | 检测鼠标相对于用户屏幕的垂直位置(只读属性) | event.screenY |
| type | 返回事件名(返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click ) | event.type |
| target | 该事件被传送到的对象 | event.target |
| pageX | 光标相对于该网页的水平位置(不适用于IE) | event.pageX |
| pageY | 光标相对于该网页的垂直位置(不适用于IE) | event.pageY |
| width | 窗口或框架的宽度 | event.width |
| height | 窗口或框架的高度 | event.height |
| data | 返回拖拽对象的URL字符串 | event.data |
总结
- 网页可见区域宽： document.body.clientWidth;
- 网页可见区域高： document.body.clientHeight;
- 网页可见区域宽： document.body.offsetWidth(包括边线宽);
- 网页可见区域高： document.body.offsetHeight(包括边线高);
- 网页正文全文宽： document.body.scrollWidth;
- 网页正文全文高： document.body.scrollHeight;
- 网页被卷去的高： document.body.scrollTop;
- 网页被卷去的左： document.body.scrollLeft;
因为这一节涉及很多关于定位上的属性方法，难免混淆，我们在下一节就page、screen和client再做一个整理
参考：
网易云js课程
网友评论