JavaScript에서 DOM 요소의 계산된 글꼴 크기를 어떻게 얻을 수 있나요?

JavaScript를 사용하여 DOM 요소에서 계산된 글꼴 크기 얻기

상속 및 전역 설정을 고려하여 DOM 요소에 적용되는 실제 글꼴 크기 결정, 웹 개발에서 일반적인 작업이 될 수 있습니다. 이는 플러그인을 사용하거나 정확한 글꼴 크기 정보가 필요한 작업을 자동화할 때 특히 유용합니다.

계산된 글꼴 크기 감지를 위한 일반적인 접근 방식

프레임워크 독립적인 글꼴 크기를 얻으려면 검색을 수행하면 다음을 활용할 수 있습니다. 접근 방식:

function getStyle(el, styleProp) {
  // Convert property name to camelCase for IE compatibility
  let camelize = (str) => str.replace(/\-(\w)/g, s => s[1].toUpperCase());

  // Attempt IE's non-standard currentStyle
  if (el.currentStyle) {
    return el.currentStyle[camelize(styleProp)];
  }
  // Try DOM Level 2 getComputedStyle if available
  else if (document.defaultView && document.defaultView.getComputedStyle) {
    return document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  }
  // Fallback to inline style
  else {
    return el.style[camelize(styleProp)];
  }
}

사용법:

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

이 접근 방식을 사용하면 상속 여부에 관계없이 모든 DOM 요소에 대해 계산된 글꼴 크기를 얻을 수 있습니다. 전역 설정입니다.

위 내용은 JavaScript에서 DOM 요소의 계산된 글꼴 크기를 어떻게 얻을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!