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

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