> 웹 프론트엔드 > CSS 튜토리얼 > CSS 규칙이 없을 때 JavaScript에서 DIV의 실제 줄 높이를 찾는 방법은 무엇입니까?

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

Linda Hamilton
풀어 주다: 2024-11-08 02:48:02
원래의
485명이 탐색했습니다.

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 속성을 사용하여 정확하게 결정할 수 있습니다. 다음 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿