How to Find the True Line-Height of a DIV in JavaScript?

Finding True Line-Height of DIVs in JavaScript

In JavaScript, it is often desirable to determine the actual line-height of a DIV, rather than relying on CSS properties. This is especially useful when the line-height is not explicitly defined in CSS.

The Challenge

Traditional methods of checking the style.lineHeight attribute provide the CSS-defined line-height, but this value may not accurately reflect the actual line-height rendered on the page.

The Solution: Using ClientHeight

The solution lies in utilizing the clientHeight property. This property, which measures the height of an element including its padding and border, can also be used to determine the line-height of a DIV under the following conditions:

• The font family and font size are the same across the lines.
• There are no additional line-height properties applied via CSS or inline style attributes.

Implementation

To obtain the actual line-height using clientHeight, follow these steps:

1. Clone the DIV in question, ensuring that all relevant styles are inherited.
2. Set the cloned DIV's innerHTML to a single character, such as "A."
3. Append the cloned DIV to the original DIV's parent node.
4. Calculate the cloned DIV's clientHeight.
5. Remove the cloned DIV from the document.

Code Snippet

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

This approach provides a simple yet effective method for accurately measuring the actual line-height of a DIV, regardless of any CSS property overrides.

The above is the detailed content of How to Find the True Line-Height of a DIV in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!