JS筆記(18): 盒子模型屬性

1、client系列

• clientWidth & clientHeight: 獲取當前元素可視區的寬高（內容的寬高+左右/上下padding）
• clientTop & clientLeft: 獲取上/左邊框的寬度

內容和是否有溢出無關（和是否設置了overflow: hidden無關，就是咱們本身及設定的內容的寬高padding

2、offset系列

• offsetWidth & offsetHeight: 內容的寬高+左右/上下padding+左右/上下border（和內容是否溢出無關）

• offsetParent: 當前盒子的父級參照物

  • 參照物：同一個平面當中，元素的父級參照物和結構沒有必然聯繫，默認他們的父級參照物都是body（當前平面最外層的盒子）
  • body的父級參照物爲null

• offsetTop/offsetLeft:

  • 獲取當前盒子距離其父級參照物的偏移量（上偏移/左偏移）
  • 當前盒子的外邊框開始 - 父級參照物的內邊框

圖示：

• 例如上面結構中：

outer.offsetParent //=>body

inner.offsetParent //=>body

center.offsetParent //=>body

• 參照物能夠改變：

  • 構建出不一樣的平面便可（使用zIndex，可是這個屬性只對定位有做用），因此改變元素的定位（position:relative/absolute/fixed),能夠改變其父級參照物

• 例如上面結構中，

若是給outer設置position:relative以後(把outer脫離原有的平面，獨立出一個新的平面，後代元素的父級參照物都會以他爲參考)

inner.offsetParent //=>outer

center.offsetParent //=>outer

outer.offsetParent //=> body

• 上面結構中：

若是給inner設置position:absolute以後

center.offsetParent //=>inner

inner.offsetParent //=>outer

outer.offsetParent //=>body

獲取當前元素距離body的偏移量

• 無論父級參照物是誰，都要獲取當前元素距離body的偏移量（左偏移/上偏移）
• 不能改變既定的樣式（不能基於position方式改變他的參照物）
• 任意元素距離body的偏移（無論參照物）
  • 1.首先獲取當前元素的左偏移
  • 2.在這個基礎上累加
    • A.父級參照物的邊框
    • B.父級參照物的偏移
  • 累加完父級的，再找父級的父級(A)，加上A的左邊框和左偏移，加到父級參照物是body爲止

3、scroll系列

• scrollWidth & scrollHeight: 真實內容的寬高+左/上padding
  • 是一個約等於的值，在不一樣瀏覽器當中，或者是否設置overflow: hidden，都對結果有影響，因此這個值只作參考
  • 不必定是本身設定的值，由於可能會存在內容溢出，若是有內容溢出，須要把溢出的部分算上，若是沒有內容溢出，和client同樣
  • 獲取當前頁面的真實寬高，包含溢出部分
• scrollTop/scrollLeft: 滾動條捲曲的寬度/高度
  • 在JS盒子模型13個屬性中，只有scrollTop/scrollLeft是可讀可寫屬性，其他都是隻讀屬性
  • 最小卷去值：0
  • 最大卷去值：真實頁面的高度 - 一屏幕的高度 document.documentElement.scrollHeight - document.documentElement.clientHeight

4、獲取元素樣式值

1) 經過JS盒模型屬性獲取值的特色:

• 1.獲取的都是數字，不帶單位
• 2.獲取的都是整數，不會出現小數（通常都是四捨五入，尤爲是獲取的偏移量）
• 3.獲取的結果都是複合樣式值（好幾個元素樣式組合在一塊兒的值），若是隻想獲取單同樣式值，例如只想得到padding值，盒子模型屬性沒法操做

2) 獲取元素具體的某個樣式值：

• 1.元素.style.xxx ：只能獲取全部寫在元素行內上的樣式（不寫在行內上，獲取不到）
• 2.window.getComputedStyle([元素],null)

獲取當前元素全部通過瀏覽器計算的樣式：只要當樣式前元素能夠在頁面中展示（或者瀏覽器渲染它了，那麼他的樣式都是被瀏覽器計算過的）

2.1 無論當前樣式寫在哪
2.2 無論當前樣式寫沒寫（瀏覽器會給元素設置一些默認樣式）
複製代碼

5、關於可視區的寬高

• 獲取當前元素一屏內（可視區域）的寬度和高度

  • 寬： document.documentElement.clientWidth || document.body.clientWidth
  • 高： document.documentElement.clientHeight || document.body.clientHeight
  • 不算橫向滾動條的高度，值是固定的

• 獲取可視區的寬高（window對象）：只讀屬性

  • 寬：window.innerWidth
  • 高：window.innerHeight

document.documentElement.clientWidth 與 window.innerWidth的區別圖示

高度同理

6、關於滾動條的距離

• 獲取當前頁面的真實寬高，包含溢出部分

  • 寬：document.documentElement.scrollWidth || document.body.scrollWidth
  • 高：document.documentElement.scrollHeight || document.body.scrollHeight
  • 不算橫向滾動條的高度，值是固定的，可讀可寫

圖示： document.documentElement.scrollHeight 與 document.documentElement.clientHeight的區別

• 滾動條到頂部/左部的距離（值不固定，隨滾動條滾動而變化，只讀屬性）

  • window.pageXOffset: 滾動條到左邊的距離（X軸）

  • window.pageYOffset: 滾動條到頂部的距離（Y軸）

  • 在IE低版本下

    • document.documentElement.scrollLeft 滾動條到左邊的距離（X軸）
    • document.documentElement.scrollTop滾動條到頂部的距離（Y軸）

• 將文檔滾動到指定位置
  • window.scrollTo(x，y)
  • 它接受兩個參數，表示滾動後位於窗口左上角的頁面座標。
  • 此屬性可寫不可讀

7、getBoundingClientRect()

getBoundingClientRect() : 獲取元素到頁面可視區的尺寸、距離

• 注意: 是跟滾動條走的
• x：元素左上角相對於視口的橫座標
• y：元素左上角相對於視口的縱座標
• height：元素高度
• width：元素寬度
• left：元素左上角相對於視口的橫座標，與x屬性相等
• right：元素右邊界相對於視口的橫座標（等於x + width）
• top：元素頂部相對於視口的縱座標，與y屬性相等
• bottom：元素底部相對於視口的縱座標（等於y + height）