JavaScript で DOM 要素の計算されたフォント サイズを取得するにはどうすればよいですか?

JavaScript を使用して DOM 要素の計算されたフォント サイズを取得する

継承設定とグローバル設定を考慮して、DOM 要素に適用される実際のフォント サイズを決定します。 Web 開発では一般的なタスクになる可能性があります。これは、プラグインを使用する場合や、正確なフォント サイズ情報が必要なタスクを自動化する場合に特に便利です。

計算されたフォント サイズ検出のための一般的なアプローチ

フレームワークに依存しないフォント サイズを実現するには取得では、以下を活用できます。アプローチ:

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