JS之offset家族(元素尺寸)

我們知道紅樓夢中 有四大家族
在JS當中也有幾大家族 現在介紹一下offset家族

offset的作用

方便獲取元素尺寸


offsetWidth offsetHeight

得到對象的寬度和高度(自己的，與他人無關)
offsetWidth: width + border + padding

div {
  width:220px;
  border-left:2px solid red;
  padding:10px;
}
div的.offsetWidth =  220 + 2(只有左邊框) + 20

注意:為什么不用 div.style.width
因為它只能得到行內的數值

offsetLeft offsetTop

如果父級都沒有定位則以body 為準
這里的父級指的是所有上一級 不僅僅指的是 父親 還可以是 爺爺 曾爺爺 曾曾爺爺。。。。


offsetLeft 從父級的padding 開始算 父親的border 不算
總結一下： 就是子盒子到定位的父盒子邊框到邊框的距離

offsetParent

返回該對象的（帶有定位）父級 不一定是親的爸爸
它和 parentNode 這個返回親父親 不管父親是否帶有定位 有所區別

  1. 如果當前元素的父級元素沒有進行CSS定位（position為absolute或relative），offsetParent為body。
  2. 如果當前元素的父級元素中有CSS定位（position為absolute或relative），offsetParent 取最近的那個父級元素。

offsetTop style.top 以及 offsetLeft和style.left 的區別

  1. offsetLeft 可以返回沒有定位盒子的距離左側的位置。 而 style.top 不可以 只有定位的盒子 才有 left top right

  2. offsetTop 返回的是數字，而 style.top 返回的是字符串，除了數字外還帶有單位：px。
    style.left = 300px parseInt（300px）
    結果 300
    parseInt（style.left） + parseInt（style.left）

  3. offsetTop 只讀，而 style.top 可讀寫。

  4. 如果沒有給 HTML 元素指定過 top 樣式，則 style.top 返回的是空字符串。

  5. 最重要的區別 style.left 只能得到 行內樣式 而offsetLeft 則都可以獲取到

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容