如何在 JavaScript 中確定 DIV 的實際行高？

在JavaScript 中確定DIV 的實際行高

許多JavaScript 開發人員經常尋求方法來確定DIV 元素的實際行高，排除以下因素的影響CSS 屬性。雖然 style.lineHeight 提供了一些信息，但它依賴於 CSS 規則的存在。

問題陳述

給定一個沒有CSS 定義的行高的DIV 元素，挑戰在於找到一個JavaScript 解決方案，無論字體屬性如何，都能準確測量實際行高。這可以確保具有不同內容長度和換行符的元素獲得一致的結果。

解

最可靠、最有效的方法是利用 clientHeight 屬性。透過建立一個與目標元素具有相同字體和大小屬性的臨時元素，我們可以提取其 clientHeight。該值表示實際的行高，包括 DIV 內的任何垂直邊距或空白。

這是一個範例實作：

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;
}

透過「複製」目標元素的屬性，此函數產生一個臨時元素並測量其 clientHeight。即使在內容複雜或缺少 CSS 規則的情況下，該技術也能準確表示實際行高。

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