原生JS獲取元素寬高實踐詳解

開篇的話

任何不是親身實踐中求得的知識，都不是屬於你的。

任何求得的知識不去時常溫習運用，也不是屬於你的。

---

記錄由來

在作個上拉廣告功能中遇到了一個「理所固然」以爲對的用法，慢慢才排查出是獲取元素高度那裏出了問題，這個問題記憶在書上或視頻中看到過，許久沒用，用的時候就想固然了。遂決定深刻剖析用法，增長記憶，記錄發表出來，也能給各位前端同行、求學者增長印象。

出錯之處

秉承結構、樣式、行爲分離的宗旨，每次無論大小案例都是分開寫html、css、js。這也算拋磚引出了我犯錯的玉。

原css：

原js獲取DOM元素高度：

var adcon = document.getElementById('adcon');
var maxH = parseInt(adcon.style.height);

這樣寫以後在console的時候發現：

返回值爲NaN。 Orz...

排查錯誤，找出緣由

寫個例子測試一下：

仔細查找CSSStyleDeclaration發現height對應值爲空

這樣就知道爲何會返回NaN了。


那爲何會是""的，百一下谷一下測試一下發現：
這個test.style.xxx 這裏只能獲取的值是標籤元素行內樣式的值。
也就是說若是這樣寫：

CSSStyleDeclaration裏纔會包括：

這種方式就會取獲得值：

擴展需求解決辦法，找到各個環境下的最優方法

關於原生JS取dom元素寬高的方法，我總結了如下五種方法，有遺漏的望各位網友提出，謝謝~

• window.getComputedStyle(dom元素,'僞類').屬性名
• dom元素.clientHeight/clientWidth
• dom元素.offsetHeight/offsetWidth
• dom元素.scrollHeight/scrollWidth
• dom元素.style.height/width

光說不練假把式，直接上codes來解釋：

getComputedStyle()方法

這個方法是隻讀的，具體語法和應用的詳細講解能夠參見張鑫旭大佬的這篇：傳送門

因而可知，這個方法取得值是內容content區域的值，與padding、margin和邊框無關。

dom元素.clientHeight/clientWidth方法

可見這是內容區域+上下padding的值。

dom元素.offsetHeight/offsetWidth

可見這是內容區域+兩個padding+兩個border的值

dom元素.style.height/width

這一開始分析過了，取得是元素行內樣式的height值（內容區域的值）

dom元素.scrollHeight/scrollWidth

我給例子加了不少內容，出現滾動條：

測試結果：

因而可知，scrollHeight方法返回的仍是content內容區域+兩個padding的值。

scrollWidth方法返回的是正文內容的總寬度

---

以上是經過實際測試得出來的結論，我的認爲比看一大片乾巴巴的文字更容易理解。下一次在實戰中碰見應該不會再犯錯了。小白一枚，淺面記錄，若有錯誤、建議、缺漏，懇請指出。