文章目錄
一.元素偏移量 offset 系列
1 . offset 概述
2. offset 與 style 區別
二. 元素可視區 client 系列
1 . client概述
三.元素滾動 scroll 系列
1 . scroll 概述
2. 頁面被捲去的頭部
一.元素偏移量 offset 系列
1. offset 概述
offset 翻譯過來就是偏移量， 使用 offset系列相關屬性可以動態的得到該元素的位置（偏移）、大小等。
-
獲得元素距離帶有定位父元素的位置
-
獲得元素自身的大小（寬度高度）
-
注意：返回的數值都不帶單位
2. offset 與 style 區別
offset
-
offset 可以得到任意樣式表中的樣式值
-
offset 系列獲得的數值是沒有單位的
-
offsetWidth 包含padding+border+width
-
offsetWidth 等屬性是隻讀屬性，只能獲取不能賦值
想要獲取元素大小位置，用offset更合適
style
-
style 只能得到行內樣式表中的樣式值
-
style.width 獲得的是帶有單位的字符串
-
style.width 獲得不包含padding和border 的值
-
style.width 是可讀寫屬性，可以獲取也可以賦值
想要給元素更改值，則需要用style改變
二. 元素可視區 client 系列
1. client概述
client 翻譯過來就是客戶端，使用 client 系列的相關屬性來獲取元素可視區的相關信息。通過 client
系列的相關屬性可以動態的得到該元素的邊框大小、元素大小等。
三.元素滾動 scroll 系列
1. scroll 概述
scroll 翻譯過來就是滾動的，使用 scroll 系列的相關屬性可以動態的得到該元素的大小、滾動距離等。
2. 頁面被捲去的頭部
如果瀏覽器的高（或寬）度不足以顯示整個頁面時，會自動出現滾動條。當滾動條向下滾動時，頁面上面被隱藏掉的高度，稱爲頁面被捲去的頭部。滾動條在滾動時會觸發 onscroll事件。
四.三大系列總結
主要用法：
1.offset系列 經常用於獲得元素位置 offsetLeft offsetTop
2.client經常用於獲取元素大小 clientWidth clientHeight
3.scroll 經常用於獲取滾動距離 scrollTop scrollLeft
4.注意頁面滾動的距離通過 window.pageXOffset 獲得
面試常問：
mouseenter 和mouseover的區別：
- 當鼠標移動到元素上時就會觸發mouseenter 事件
- 類似 mouseover，它們兩者之間的差別是
- mouseover 鼠標經過自身盒子會觸發，經過子盒子還會觸發。mouseenter 只會經過自身盒子觸發
- 之所以這樣，就是因爲mouseenter不會冒泡
- 跟mouseenter搭配鼠標離開 mouseleave 同樣不會冒泡
作業部分：