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課程
