JS 盒子模型

2022-09-18 11:39:31 字數 1751 閱讀 1143

client屬性

屬性offsetwidth / offsetheight

border+padding+width

offsetleft / offsettop

margin+fater』s padding(fater需有定位,若沒有則以body為fater)

offsetparent

獲取 定位!=static 的父物件(若父物件都沒定位則返回body)

scroll用於獲取帶(不帶也可以)滾動條盒子的尺寸資訊

屬性scrollwidth / scrollheight

padding+width

scrolltop / scrollleft

超出部分的(padding+width)

body的scrolltop/scrollleft存在相容性問題，除body外的其他元件沒有相容問題

文件沒有dtd宣告時用：

document.body.scrolltop


document.body.scrollleft
文件有dtd宣告時用：

document.documentelement.scrolltop


document.documentelement.scrollleft
無視dtd宣告的寫法（谷歌、火狐、ie9+支援）：

window.pageyoffset


window.pagexoffset
相容性寫法：

window.pageyoffset||document.body.scrolltop||document.documentelement.scrolltop
屬性

clientwidth / clientheight

padding+width

clienttop /clientleft

對應 border-top-width 和 border-left-width

clientx / clienty

滑鼠距離可視區域左上角的距離(用於事件,詳看事件小節)

文件沒有dtd宣告時用：

document.body.clientwidth


document.body.clientheight
文件有dtd宣告時用：

document.documentelement.clientwidth


document.documentelement.clientheight
無視dtd宣告的寫法（谷歌、火狐、ie9+支援）：

window.innerwidth


window.innerheight
相容性寫法：

window.innerheight||document.body.clientheight||document.documentelement.clientheight

js盒子模型

通過js中提供一系列的方法和屬性獲取頁面中元素的樣式資訊值 內容的寬高 是給元素定義的width height這兩個樣式。如果沒有設定height值，容器的高度會根據裡面內容自己適應，這樣獲取的值就是真實的內容的高 如果設定固定的高度，不管內容是多少，內容的高度指的都是設定的這個值 真實內容的寬高 ...

js盒子模型

js盒子模型是指通過js中一系列的屬性和方法獲取頁面中元素的樣式資訊值 1 client系列 clientwidth 設定的寬度 width 內邊距 padding 2 clientheight 設定的高度 height 內邊距 padding 2 clientleft 左邊框的寬度 border的...

JS盒子模型

clientwidth 盒子寬度 左右的padding clientheight 盒子高度 上下的padding clientleft 盒子左邊框的寬度 clienttop 盒子上邊框的寬度 offsetwidth clientwidth 左右border offsetheight clienthe...