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 中国語 Web サイトの他の関連記事を参照してください。