HTML のフォント サイズを正確に取得して調整するにはどうすればよいですか?

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

HTML 要素のフォント サイズを取得するのは簡単な作業のように思えるかもしれません。ただし、単に style.fontSize プロパティにアクセスするだけでは、特にフォント サイズが外部スタイルシートで定義されている場合には、常に望ましい結果が得られるとは限りません。

正確なフォント サイズ値を取得するには、window.getComputedStyle() を利用します。方法。この関数は、要素の有効なスタイル (祖先から継承されたスタイルを含む) を計算します。以下に例を示します。

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);

このコードは、ID「foo」を持つ要素の計算されたフォント サイズを取得し、それを fontSize 変数に保存します。これで、実際のフォント サイズ値にアクセスできるようになりました。

このアプローチを使用すると、動的なフォント サイズ調整を実装できます。例:

el.style.fontSize = (fontSize + 1) + 'px';

このコード行は、「foo」要素のフォント サイズを 1 ステップずつ増やします。必要に応じて、「1」を任意の値に置き換えてフォント サイズを変更できます。

以上がHTML のフォント サイズを正確に取得して調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。