ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS ルールが存在しない場合に JavaScript で DIV の実際の行の高さを見つける方法

CSS ルールが存在しない場合に JavaScript で DIV の実際の行の高さを見つける方法

Linda Hamilton
リリース: 2024-11-08 02:48:02
オリジナル
486 人が閲覧しました

How to Find the Actual Line-Height of a DIV in JavaScript When No CSS Rule Exists?

JavaScript で DIV の実際の行の高さを求める

JavaScript では、要素の行の高さを取得するのは、 style.lineHeight プロパティ。ただし、このアプローチは、行の高さを指定する CSS スタイル ルールの存在に依存します。このようなルールが存在しない場合、要素の実際にレンダリングされる行の高さを決定することは、別の課題を引き起こします。

解決策: ClientHeight の利用

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート