JavaScript에서 DOM 요소의 계산된 글꼴 크기를 얻는 방법은 무엇입니까?

JavaScript에서 계산된 글꼴 크기를 검색하는 방법

DOM 요소의 실제 글꼴 크기를 결정하는 것은 사용자 정의와 같은 다양한 시나리오에서 매우 중요합니다. 텍스트 편집기 또는 반응형 웹 레이아웃 디자인. 여기에는 요소의 명시적 스타일뿐만 아니라 상속된 값과 브라우저 수준 설정도 고려하는 작업이 포함됩니다.

해결책

계산된 글꼴 크기를 얻으려면 두 가지 방법을 활용할 수 있습니다. :

1. 브라우저별 방법: currentStyle

Internet Explorer의 경우 비표준 currentStyle 속성을 사용할 수 있습니다.

element.currentStyle['fontSize']

font-size, currentStyle의 경우 camelCase(예:fontSize)로 액세스해야 합니다.

2. 표준 방법: getCompulatedStyle

다른 모든 브라우저 및 브라우저 간 호환성을 위해 DOM 레벨 2 표준 getComputeStyle 방법을 사용할 수 있습니다:

document.defaultView.getComputedStyle(element, null).getPropertyValue('fontSize')

구현 예

유틸리티 함수를 정의하여 스타일:

function getStyle(element, styleProp) {
  var camelize = function (str) {
    return str.replace(/\-(\w)/g, function(str, letter){
      return letter.toUpperCase();
    });
  };
  
  if (element.currentStyle) {
    return element.currentStyle[camelize(styleProp)];
  } else if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(element,null)
                               .getPropertyValue(styleProp);
  } else {
    return element.style[camelize(styleProp)]; 
  }
}

사용법:

var element = document.getElementById('elementId');
getStyle(element, 'font-size');

추가 팁

• getComputeStyle에 액세스하기 전에 document.defaultView가 있는지 확인하세요.
• currentStyle과 getCompulatedStyle을 모두 사용할 수 없는 경우 다음을 사용하세요. element.style은 인라인 CSS 속성을 검색합니다.

위 내용은 JavaScript에서 DOM 요소의 계산된 글꼴 크기를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!