如何在沒有 jQuery 的情況下取得 Div 的高度？

無需jQuery 即可取得Div 高度

開發人員經常尋求在不依賴jQuery 等庫的情況下檢索div 元素高度的方法。雖然 jQuery 的 .height() 方法被廣泛引用，但也有一些簡單的 JavaScript 解決方案可以有效地完成相同的任務。

jQuery .height() 的替代方法

僅透過 JavaScript 確定 div 的高度，開發人員可以利用表示 div 的 HTMLElement 物件的 clientHeight 或 offsetHeight 屬性。以下是每個屬性的功能：

• clientHeight：此屬性測量 div 可見內容的高度，包括填充，但不包括邊框和捲軸。
• offsetHeight：此屬性傳回總高度div 的高度，包括內邊距、捲軸和邊框。

實現

要使用clientHeight 檢索div 的高度，請使用以下語法：

<code class="javascript">var clientHeight = document.getElementById('myDiv').clientHeight;</code>

或者，要在測量中包含捲軸和邊框，您可以使用offsetHeight:

<code class="javascript">var offsetHeight = document.getElementById('myDiv').offsetHeight;</code>

範例

這裡有一個範例示範這兩個屬性的用法：

<code class="html"><div id="myDiv" style="height: 100px; padding: 20px; border: 10px solid black;">
    Content
</div></code>

<code class="javascript">var clientHeight = document.getElementById('myDiv').clientHeight; // Returns 80
var offsetHeight = document.getElementById('myDiv').offsetHeight; // Returns 130</code>

在此範例中，clientHeight 傳回80px，因為它不包括填充和邊框，而offsetHeight 傳回130px，包括所有影響 div 高度的元素。

以上是如何在沒有 jQuery 的情況下取得 Div 的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！