當不存在 CSS 規則時，如何在 JavaScript 中找到 DIV 的實際行高？

在JavaScript 中找出DIV 的實際行高

在JavaScript 中，取得元素的行高非常簡單，透過style.lineHeight 屬性。然而，這種方法依賴於指定行高的 CSS 樣式規則的存在。當這樣的規則不存在時，確定元素的實際渲染行高會帶來不同的挑戰。

解決方案：利用 ClientHeight

實際行高可以使用 clientHeight 屬性準確地確定，因為它表示元素的計算高度，包括填充，但不包括邊距。以下 JavaScript 函數示範了此技術：

function getLineHeight(el) {
  // Create a temporary element to clone the target element's properties
  const temp = document.createElement(el.nodeName);

  // Override default styles to ensure consistent font properties
  temp.setAttribute("style", "margin:0; padding:0; font-family:" +
    (el.style.fontFamily || "inherit") + "; font-size:" +
    (el.style.fontSize || "inherit"));

  // Set the temporary element's content to "A"
  temp.innerHTML = "A";

  // Append the temporary element to the DOM
  el.parentNode.appendChild(temp);

  // Get the computed height of the temporary element
  const ret = temp.clientHeight;

  // Remove the temporary element
  temp.parentNode.removeChild(temp);

  // Return the computed height, which represents the actual line-height
  return ret;
}

此函數有效地將目標元素的屬性複製到臨時元素中，然後使用該臨時元素來計算行高。透過在臨時元素中將字體屬性設為“繼承”，我們確保它採用與目標元素相同的字體系列和大小。這種方法提供了一種可靠且一致的方法來確定實際渲染的行高，無論是否存在 CSS 樣式規則。

以上是當不存在 CSS 規則時，如何在 JavaScript 中找到 DIV 的實際行高？的詳細內容。更多資訊請關注PHP中文網其他相關文章！