JS獲取div高度的方法

有時在寫頁面時，需要獲取乙個div的高度。怎麼才能獲取呢？哈哈，先上結論。有兩種方法。

offsetheight 與 clientheight

這兩個屬性都能獲取元素的高度，它們有什麼區別呢？

**說話~


demotitle>
#demo 
style>
head>
hellodiv>
var div = document.getelementbyid('demo');
console.log(div.offsetheight); // 224
console.log(div.clientheight); // 220
script>
body>
html>

可以看出

offsetheight = content + border + padding = 200 + 2 * 2 + 10 * 2 = 224

clientheight = content + padding = 200 + 2 * 10 = 220

兩個屬性的差距於是就顯而易見了。同樣返回元素的高度，offsetheight的值包括元素內容+內邊距+邊框，而clientheight的值等於元素內容+內邊距。區別就在於有沒有邊框~

但是，問題來了，我們想獲取元素本身的高度呢？於是——

請往下看~

1，有小夥伴可能會說，我們可以直接利用style屬性獲取元素高度。然而在上面的**中，

console.log(div.style.height) // ''

為空！

這是因為style屬性只能獲取元素標籤style屬性裡的值。對於乙個光禿禿的，style的輸出是空的。

下面把內部樣式表中的高度注釋掉，寫在行內樣式中，改動如下。

#demo

hellodiv>

這個時候style屬性的輸出為

console.log(div.style.height) // 200px

完美獲得元素高度。

可是。問題又來了，如果我們每次都要寫成內聯樣式，也太費事了吧。那麼，該怎麼辦？

2，getcomputedstyle

getcomputedstyle方法獲取的是最終應用在元素上的所有css屬性物件（即使沒有css**，也會把預設的祖宗八代都顯示出來）；這和style屬性只能獲取內聯樣式的行為形成了鮮明的對比。除此之外，getcomputedstyle是唯讀的，但是style能文能武，可讀可寫，我們也可以利用它動態設定元素的高度。

我們只需輸入這麼一行**。

window.getcomputedstyle(div);

我只截了部分，可以清晰地看到，getcomputedstyle方法取得了元素的所有樣式。

嗯，很適合查詢。

可是我們只想要高度呀。那就讓getpropertyvalue方法來幫忙getpropertyvalue方法可以獲取css樣式申明物件上的屬性值。

如。

console.log(window.getcomputedstyle(div).getpropertyvalue('height')); // 200px

當計算邊界矩形時，會考慮視口區域（或其他可滾動元素）內的滾動操作，也就是說，當滾動位置發生了改變，top和left屬性值就會隨之立即發生變化（因此，它們的值是相對於視口的，而不是絕對的）。如果不希望屬性值隨視口變化，那麼只要給top、left屬性值加上當前的滾動位置（通過window.scrollx和window.scrolly），這樣就可以獲取與當前的滾動位置無關的常量值。

詳情請參考element.getboundingclientrect()

再次end。

原文 js獲取div高度的方法

JS獲取div高度的方法

獲取div的高度

JS如何獲取乙個未知DIV高度的方法

js監聽div高度變化

JS獲取div高度的方法

獲取div的高度

JS如何獲取乙個未知DIV高度的方法

js監聽div高度變化

相關推薦