JavaScript で DIV の実際の行の高さを見つける方法は?

JavaScript で DIV の実際の行の高さを確認する

JavaScript では、DIV の実際の行の高さを決定することが望ましいことがよくあります。 CSS プロパティに依存するのではなく、これは、行の高さが CSS で明示的に定義されていない場合に特に便利です。

課題

style.lineHeight 属性をチェックする従来の方法では、CSS で定義された

解決策: ClientHeight を使用する

解決策は、 clientHeight プロパティ。このプロパティは、パディングとボーダーを含む要素の高さを測定し、次の条件下で DIV の行の高さを決定するために使用することもできます。

• フォント ファミリーとフォント サイズは次のとおりです。
• CSS またはインライン スタイル属性を介して適用される追加の行の高さのプロパティはありません。

実装

clientHeight を使用して実際の行の高さを取得するには、次の手順に従います。

1. 関連するすべてのスタイルが確実に継承されるように、問題の DIV を複製します。
2. 複製された DIV の innerHTML を「A.」などの 1 文字
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 中国語 Web サイトの他の関連記事を参照してください。