JavaScriptを使用してテキストのフォントの太さを変更するにはどうすればよいですか?

JavaScript の使用は、Web ページ上のテキストのフォントの太さを変更する最もよく知られた方法の 1 つです。 JavaScript と HTML 要素を使用してインタラクティブなアプリケーションを構築できます。フォントウェイトとは文字の太さを指します。この記事では、JavaScript を使用してテキストのフォントの太さを変更する方法を学びます。

スタイルの fontWeight 属性の使用

段落や見出しなどの単一要素のフォントの太さを変更する方法を見てみましょう。これを行うには、要素の「style.fontWeight」プロパティを使用します。このプロパティは、すべての CSS プロパティとそれらに対応する値を含むオブジェクトです。

次の構文を使用して、テキストのフォントの太さを変更できます -

ここでは、fontWeight プロパティに「normal」、「lighter」、「bold」、「bold」、または 100 ～ 900 の値を指定できます。

したがって、数値とキーワードという 2 つの方法で fontWeight プロパティに値を割り当てることができます。

例: fontWeight プロパティに数値を割り当てる

このメソッドを使用して HTML 要素のフォントの太さを変更するには、数値を 100 ～ 900 の範囲に設定する必要があります。数値を使用してタイトル要素のフォントの太さを変更する例を見てみましょう。

例でわかるように、ここでは getElementById メソッドを使用して ID「myHeading」を持つ見出し要素を選択し、オブジェクトの font-weight プロパティを 300 に設定します。オブジェクトのテキストを設定します。 300まで。タイトル要素は通常よりも軽くなります。

例: fontWeight プロパティへのキーワードの割り当て

このメソッドを使用して HTML 要素のフォントの太さを変更するには、

を使用できます。 font-weight を Normal に設定することは、font-weight を 400 に設定することに相当し、font-weight を太字に設定することは、font-weight を 700 に設定することに相当します。 リーリー 例でわかるように、ここでは getElementById メソッドを使用して ID「myParagraph」の段落要素を選択し、オブジェクトの font-weight プロパティを「bolder」に設定します。 「bolder」は、段落要素のテキストを以前よりも太字にします。

複数の要素のフォントの太さを変更する

ドキュメント内のすべての段落など、複数の要素のフォントの太さを一度に変更したい場合は、「querySelectorAll」メソッドを使用できるとします。指定された CSS セレクターに一致するすべての HTML 要素のノード リストを返します。

例: forEach メソッドの使用

forEach メソッドを使用して、ドキュメント内の段落のすべての要素のフォントの太さを変更する例を見てみましょう。

上記の例では、「querySelectorAll」を使用して、HMTL ドキュメント内の段落のすべての要素を選択します。次に、ノード リストの forEach メソッドを使用してすべての段落を反復し、フォントの太さを 700 に設定します。

「forEach」メソッドは、ノードのリストを反復処理するのに便利な方法です。これにより、リスト内の各要素に対して関数を実行できます。この例では、各段落要素のスタイル オブジェクトの "fontWeight" プロパティを 700 に設定します。

例: for-of ループメソッドの使用

for-of ループ メソッドを使用してドキュメント内の複数の要素のフォントの太さを変更する別の例を見てみましょう。 for-of ループは、ノードのリストを反復する従来の方法または別の方法です。

この例では、「for-of」ループを使用して段落を反復処理し、フォントの太さを 700 に設定します。 for ループと for-of ループの違いは、for-of ループではノード リストの要素に直接アクセスできるのに対し、for ループではそのインデックスにアクセスすることです。

この記事では、テキストのフォントの太さを変更する方法を例を挙げて説明しました。ここでは、JavaScript を使用して単一要素および複数要素のフォントの太さを変更するさまざまな例を示します。複数の要素に対して forEach メソッドと for-of メソッドを使用して 2 つの異なる例を作成しました。

以上がJavaScriptを使用してテキストのフォントの太さを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。