スタイルシートで定義されている場合でも、HTML のフォント サイズを確実に取得および更新するにはどうすればよいですか?

HTML でのフォント サイズの取得

HTML では、CSS を使用して要素のフォント サイズを指定できます。通常、style.fontSize プロパティはフォント サイズの設定または取得に使用されます。ただし、フォント サイズがスタイルシートで定義されている場合、フォント サイズの取得が困難になることがあります。

style.fontSize の使用

次の例では、フォントを取得して更新しようとしています。 style.fontSize:

var x = document.getElementById("foo").style.fontSize;
document.getElementById("foo").style.fontSize = x + 1;

を使用した要素のサイズ ただし、このコードは、 font-size は CSS スタイルシートで外部的に定義されます。このような場合、style.fontSize は空の文字列を返し、予期しない結果が生じる可能性があります。

window.getComputedStyle を使用する

フォント サイズを正確に取得するには、スタイルシートで定義されている場合は、window.getComputedStyle メソッドを使用します。このメソッドは要素の実際のスタイルを計算します。

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); // Converts the retrieved value to a float
el.style.fontSize = (fontSize + 1) + 'px'; // Updates the font size

window.getComputedStyle を利用すると、スタイルシートでの定義に関係なく、要素のフォント サイズを確実に取得して更新できます。

以上がスタイルシートで定義されている場合でも、HTML のフォント サイズを確実に取得および更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。