CSS 定義がない場合、JavaScript でレンダリングされたフォント情報にアクセスするにはどうすればよいですか?

CSS 定義がない場合のレンダリングされたフォントへのアクセス

HTML 要素のプロパティを検査すると、重要な情報が明らかになる場合があります。 JavaScript の object.style 属性を使用する場合、font-face や font-size などが欠落しています。これは、要素のスタイルが Web ページの CSS から継承されており、これらのプロパティが明示的に定義されるまで、object.style 属性は空のままであるためです。

ただし、実際にレンダリングされたフォント情報を取得することは依然として可能です。 getComputedStyle メソッド。これを実現する JavaScript 関数を次に示します。

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

この関数を利用するには、検査したい要素と取得したいプロパティ ('font-size' など) を渡すだけです。例:

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 中国語 Web サイトの他の関連記事を参照してください。