CSS 규칙이 없을 때 JavaScript에서 DIV의 실제 줄 높이를 찾는 방법은 무엇입니까?

JavaScript에서 DIV의 실제 줄 높이 찾기

JavaScript에서 요소의 줄 높이를 얻는 것은 다음을 통해 간단합니다. style.lineHeight 속성. 그러나 이 접근 방식은 줄 높이를 지정하는 CSS 스타일 규칙의 존재에 의존합니다. 이러한 규칙이 없는 경우 요소의 실제 렌더링된 줄 높이를 결정하는 것은 다른 문제를 야기합니다.

해결책: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!