CSS width/height

內容區域的大小在padding以內. CSS屬性的設置使用element.style, 獲取用getComputedStyle()/currentStyle. 更詳細的內容, 關注我們后面的文章.

clientWidth/Height

scrollWidth/Height

內容區域的寬度和高度,包括滾動部分

scrollHeight = 723 :全部高度, 包含滾動的部分

scrollWidth = 324 :全部寬度,包含滾動的部分

scrollWidth/Height 作為 clientWidth/Height 的話, 使用是一樣的 , 但是他們包含滾動區域.

下面代碼改變元素的垂直大小, 顯示所有的內容

element.style.height = element.scrollHeight+ 'px'

scrollTop/scrollLeft

滾動出的部分大小:垂直和水平. 值的單位也是像素.

下面圖說明了一個垂直滾動的盒子的scrollHeight和scrollTop.

scrollLeft/scrollTop 是可寫的

不像另外的屬性, 都是可讀的. scrollLeft/scrollTop是可以被改變的.來改變元素的滾動.

在標準模式中.document的滾動是在document.documentElement下.

offsetWidth/Height

外框盒子的 width/height, 包含Border,不包含margin.

這是外框盒子的樣子.

offsetWidth = 390 : 外框盒子寬度

offsetHeight = 290 : 外框盒子高度

clientTop/Left

盒子外框的client區域的縮進.

換句話說,就是top/left的大小, 單位像素.

兩種特殊的情況:

clientLeft = 25 : left大小

clientTop = 25 : top大小

offsetParent , offsetLeft/Top

屬性offsetLeft和offsetTop反映了一個元素相對于他的offsetParent的相對移動. offsetParent是在布局中的父元素. 比如, 如果一個元素是絕對定位, offsetParent不是他的DOM父元素. 而是一個離他最近的定位的元素(或者body).

offsetParent規則 :

靜態定位: 最近的表格單元格或者BODY(標準模式下)

定位的其他模式: 最近的定位元素

如果父元素是display:none, 執行正常.

除了TR元素執行正常, 在某些瀏覽器重,TR會有BUG. 但是我們通常是檢查另外的元素, 所以使用正常

如果元素是visibility:hidden或者定位off-screen, 這樣檢查就失效了. 空元素同樣也被隱藏.

clientWidth/clientHeight - 在border里的區域, client區域包含padding,但不包含滾動區域.

clientLeft/clientTop - left/top大小或者說, 盒子左上角的client區域的移動. IE在也是一樣, 因為document.body可能被移動.

scrollWidth/scrollHeight - 包含滾動的內容區域, 但不包含滾動條本身自己的大小

scrollLeft/scrollTop - 滾動條的移動部分, 從左上角開始.

offsetWidth/offsetHeight -包含margin的盒子大小

offsetParent - 靜態的定位相對于最近的單元格, body.或者最近的定位元素.

offsetLeft/offsetTop - 盒子的左上角的位置相對于offsetParent.