如何在 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 中删除克隆的 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中文网其他相关文章！