JavaScript で DOM 要素の計算されたフォント サイズを取得する方法

JavaScript で計算されたフォント サイズを取得する方法

DOM 要素の実際のフォント サイズを決定することは、カスタマイズなどのさまざまなシナリオで重要です。テキストエディターやレスポンシブ Web レイアウトのデザイン。これには、要素の明示的なスタイルだけでなく、継承された値やブラウザレベルの設定も考慮する必要があります。

解決策

計算されたフォント サイズを取得するには、2 つの方法を利用できます。 :

1.ブラウザ固有のメソッド: currentStyle

Internet Explorer の場合、非標準の currentStyle プロパティを使用できます:

element.currentStyle['fontSize']

プロパティ名には、font-size などのハイフンが含まれることに注意してください。キャメルケース (例: fontSize) でアクセスする必要があります。 currentStyle.

2.標準メソッド: getComputedStyle

他のすべてのブラウザおよびブラウザ間の互換性については、DOM レベル 2 の標準 getComputedStyle メソッドを使用できます:

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

実装例

を取得するユーティリティ関数を定義します。 style:

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');

追加のヒント

• getComputedStyle にアクセスする前に document.defaultView の存在を確認してください。
• currentStyle と getComputedStyle の両方が使用できない場合は、次を使用します。 element.style はインライン CSS プロパティを取得します。

以上がJavaScript で DOM 要素の計算されたフォント サイズを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。