CSS 정의가 없을 때 JavaScript에서 렌더링된 글꼴 정보에 어떻게 액세스할 수 있습니까?

CSS 정의가 없을 때 렌더링된 글꼴에 액세스

HTML 요소의 속성을 검사하는 동안 중요한 정보가 JavaScript의 object.style 속성을 사용할 때 글꼴 얼굴 및 글꼴 크기와 같은 항목이 누락되었습니다. 이는 요소의 스타일이 웹페이지의 CSS에서 상속되고 해당 속성이 명시적으로 정의될 때까지 object.style 속성이 비어 있기 때문입니다.

그러나 다음을 사용하여 실제 렌더링된 글꼴 정보를 검색하는 것은 여전히 ​​가능합니다. getComputedStyle 메소드. 다음은 이를 수행하는 JavaScript 함수입니다.

function css(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}

이 기능을 활용하려면 검사하려는 요소와 검색하려는 속성(예: '글꼴 크기')을 전달하기만 하면 됩니다. 예:

css(object, 'font-size'); // Returns '16px' or similar

이 방법은 Internet Explorer 8에서 지원되지 않습니다.

라이브 데모:

여기를 클릭하세요. JSFiddle의 라이브 데모를 보려면: http://jsfiddle.net/4mxzE/

코드 조각:

// Retrieve the computed style information
console.log(
  getComputedStyle(document.getElementById('test'), null)
    .getPropertyValue('font')
);

// Define a custom CSS style for the element
document.getElementById('test').style.cssText = 'font-family: fantasy, cursive;';

// Append an HTML element to the document
document.body.appendChild(document.getElementById('test'));

#test {
  /* Custom font-face applied */
}

<!-- Element with rendered font -->
<div>

위 내용은 CSS 정의가 없을 때 JavaScript에서 렌더링된 글꼴 정보에 어떻게 액세스할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!