詳解DOM元素寬高和相對位置的一些方法

需要提前說明的是, 這些API全是針對Chrome的, 其他瀏覽器不一定使用(要我考慮兼容性不如讓我寫後端)

頁面寬高: document.body.clientWidth/clientHeight

視窗寬高: document.documentElement.clientWidth/clientHeight

就憑以上者兩個例子, 就可以看出來實際上無論是頁面, 還是視窗, 其實都是用一個DOM元素的高度來表示的. body元素表示整個文檔的自不比多說, 因為head標籤里的元素根本就不會佔高度, 比較有趣的是, 用html元素的高度表示視窗的高度. 這就比較奇怪啦. 下面先著重說一下這點.

可以肯定的是, document.documentElement表示的就是html元素. document.body表示body元素. 看以下代碼:

var html = document.querySelector(html)nconsole.log(html === document.documentElement)n

通過以上的求證, 我們不難發現一個很多人都沒有注意到的現象, 即: html標籤的高度是固定的(而且是只可讀不可寫), 只跟瀏覽器的窗口大小有關. 無論html中的內容有多高, 都不會對html的高度造成影響, 整個頁面就好像是不確定高度的 body 在一個固定了高度的容器中scroll一樣.

說起來可能有點複雜, 但是你只要嘗試在完全空白的頁面中依次輸入以下代碼:

document.body.style.height = 5000px // 頁面出現滾動條ndocument.documentElement.style.overflow = hidden // 滾動條消失, 頁面不可滾動ndocument.documentElement.style.height = 5000px // 沒有任何反應n

這再一次印證了我們上邊的"html不動論". 至於為什麼在chrome開發工具中查看html元素的高度會和body高度一樣, 我認為這是一個BUG. 對的, 新手就是這麼不負責任.

除了html和body元素, 還有其他普通的元素, 獲取他們寬高的方式其實都是一樣的, 只是有一點需要注意:

元素寬高是指包括content和padding在內的寬高, 不包括border和margin

元素寬高: element.clientWidth/clientHeight

ok, 以上就是獲取元素的寬高的方法, 實際上總結起來就一個API: element.clientWidth/clientHeight. 只要注意到html和body的特殊點就是啦.

以上都只是一些絕對的數值, 還有一些相對數也比較重要. 比如,

滾動距離: scrollTop/Left(切忌區別與scrollHeight, 二者差異挺大).

scrollTop是初學者最容易搞錯的一個屬性. 考慮如下代碼:

<div id="app">ntt<div id="app2">nttntt</div>nt</div>nnt#app {nttheight: 100px;nttoverflow-y: scroll;nt}nnt#app2 {nttheight: 500px;nttbackground-color: green;nt}n

1. 如果我把滾動條拉到底部, app.scrollTop 和 app2.scrollTop的值分別為多少?

2. 如果我設置scrollTop值為400的那個元素的scrollTop = 5000, 又再列印出他的scrollTop屬性, 該是多少?

3. 如果去掉#app的overflow-y, 改為overflow, 滾動條拉到底部又有什麼不一樣?

以上三個問題我都不說答案, 只說說由此得出的結論

1. scrollTop屬性是指該元素滾動條滾過的那段距離所代表的高度, 滾動條是誰的, scrollTop屬性就是誰的.

2. scrollTop屬性的最大值 = 內部元素的高度 - 該元素的高度, 超過這個值的scrollTop將被設置為這個最大值.

3. 滾到頁面底部時scrollTop的值會莫名其妙地加上橫向滾動條的高度值(Chrome下為16px), 又要說這是個BUG.

還有兩個比較重要的, 是offsetTop/Left, 表示相對於position不為static的父元素的左上角的位置的像素值. 具體參考absolute和fixed的對照方法. 這裡就不細說.

最後的最後, 我想要說一說曾經救我一命的getBoundingClientRect(). 這是一個DOM API, 存在於每一個DOM對象上, 作用是返回一個這樣的對象:

{nttttop: 0, ntttright: 676.5, ntttbottom: 150, ntttleft: 0, ntttwidth: 676.5,ntttheight: 150.5ntt}n

裡邊的top/right/bottom/left都是相對於瀏覽器窗口的像素值, width/height是該元素的寬高. 需要注意的是, 這些都是Number類型的. 至於具體有什麼用, 等你需要的時候自然會清楚. 相當有用.

大概就是這些, 其他的什麼各種奇奇怪怪的高度寬度, 我想一般人都能用以上幾個通過換算得出來. 沒什麼困難的.

happy html~