如何在 JavaScript 中找到 DIV 的真實行高？

在JavaScript 中尋找DIV 的真實行高

在JavaScript 中，通常需要確定DIV 的實際行高，而不是依賴CSS屬性。當 CSS 中未明確定義 line-height 時，這尤其有用。

挑戰

檢查style.lineHeight 屬性的傳統方法提供CSS 定義的line-height，但該值可能無法準確反映頁面上渲染的實際line-height 。

解決方案：使用 ClientHeight

解決方案在於利用 clientHeight 屬性。此屬性測量元素的高度，包括其填充和邊框，也可用於在以下條件下確定 DIV 的行高：

• 字體系列和字體大小為各行都相同。
• 沒有透過 CSS 或內嵌樣式套用額外的行高屬性屬性。

實現

要使用clientHeight 取得實際行高，請依照以下步驟操作：

1. 克隆DIV有問題，確保繼承所有相關樣式。
2. 將克隆DIV 的 innerHTML 設定為單一字符，例如「A」。
3. 將複製的 DIV 附加到原始 DIV 的父節點。
4. 計算複製的 DIV 的 clientHeight。
5. 刪除從克隆的DIV document.

程式碼片段

function getLineHeight(el) {
    var temp = document.createElement(el.nodeName), ret;
    temp.setAttribute("style", "margin:0; padding:0; "
        + "font-family:" + (el.style.fontFamily || "inherit") + "; "
        + "font-size:" + (el.style.fontSize || "inherit"));
    temp.innerHTML = "A";

    el.parentNode.appendChild(temp);
    ret = temp.clientHeight;
    temp.parentNode.removeChild(temp);

    return ret;
}

這種方法提供了一種簡單而有效的方法來準確測量DIV 的實際行高，無論任何CSS 屬性覆蓋。

以上是如何在 JavaScript 中找到 DIV 的真實行高？的詳細內容。更多資訊請關注PHP中文網其他相關文章！