JavaScript を使用してラベルのテキストを変更するにはどうすればよいですか?

HTML ドキュメント内のラベル要素のテキストを変更する方法を学ぶ前に、まずラベル タグ自体が何であるかを理解しましょう。

タグは、ユーザーがクリックするとその中のテキストを切り替えることができるため、マウス ユーザーにとって Web ページの使いやすさを向上させるのに役立ちます。

次に、JavaScript を使用してラベル要素のテキストを変更する方法について説明します。

JavaScript では、以下に示す 2 つの組み込みプロパティを使用して、HTML ドキュメント内の任意の要素のテキストを変更できます -

• #innerHTML 属性を使用します。

• innerText 属性を使用します。

innerHTML 属性を使用する

innerHTML 属性を使用すると、HTML を使用して新しいテキストを変更または割り当てることができます。つまり、新しいテキストをフィードするときに HTML タグを使用し、さまざまな HTML 要素を使用して定義することで、その重要性に応じて新しいテキストを管理できます。

＃＃＃文法＃＃＃ 次の構文は、JavaScript の innerHTML 属性を使用してラベル要素に新しいテキストを変更または割り当てるために使用されます -

リーリー

JavaScript コード例を使用して、ラベル要素テキストの innerHTML プロパティを変更する実際の実装を見てみましょう -

＃＃＃アルゴリズム＃＃＃

ステップ 1

- 最初のステップでは、JavaScript でクロールするために ID を持つタグ要素を HTML ドキュメントに追加し、後で innerHTML 属性を使用してそのテキストを変更します。

• ステップ 2

  - 次のステップでは、input 要素をドキュメントに追加して、ユーザーから入力テキストを取得し、label 要素のテキストをそのテキストに置き換えます。

• ステップ 3 p> - このステップでは、関数を値として受け取り、ユーザーがボタンをクリックしたときにそれを呼び出す onclick イベントが関連付けられたボタン要素を追加します。

• ステップ 4 - 4 番目のステップでは、上記の構文に示すように innerHTML プロパティを使用してラベル タグのテキストを変更する JavaScript カスタム関数を定義します。

• ステップ 5

  - 最後のステップでは、ボタンのラベルに関連付けて定義された onclick イベントに、最後のステップで定義した関数を割り当てます。これにより、ボタンが後で呼び出されるようになります。をクリックします。

• ＃＃＃例＃＃＃ 次の例では、実際に innerHTML 属性を使用して、JavaScript を使用してラベル要素のテキストを変更する方法を説明します - リーリー

  上記の例では、まずドキュメント内で割り当てられた ID を使用してタグ要素を取得し、次に innerHTML プロパティを使用してテキストを HTML タグも含まれる新しいテキストに変更します。

innerText 属性を使用する

innerHTML 属性と同様に、innerText 属性も HTML ドキュメント内に存在する HTML 要素のテキストを変更するために使用されます。これは innerHTML 属性とほとんど似ていますが、唯一の違いは、内部にテキストを含む HTML 要素の使用が許可されていないことです。 HTML 要素をテキストとともに使用しようとすると、それらは新しいテキストの一部として扱われ、ユーザーの画面にそのまま表示されます。

＃＃＃文法＃＃＃

次の構文は、innerText 属性を使用してラベル要素のテキストを変更する方法を示します -

リーリー

JavaScript コード例を使って詳しく理解し、実際に実装してみましょう。

＃＃＃アルゴリズム＃＃＃

前の例とこの例のアルゴリズムはほぼ似ています。テキストを変更するには、上の例の innerHTML 属性を innerText 属性に置き換えて、いくつかの小さな変更を加えるだけです。

＃＃＃例＃＃＃

次の例は、innerText 属性を使用して JavaScript でラベル要素のテキストを変更する方法を示しています -

リーリー

この例では、innerHTML プロパティを使用するのと同じ方法で、JavaScript を使用してラベル要素のテキストを変更します。

この記事では、HTML ドキュメント内のタグ要素のテキストを変更する 2 つの異なる方法と、コード例での実際の実装について説明しました。前の例では、innerHTML 属性を使用してテキストを変更しました。これにより、HTML 要素を使用して二重引用符内にテキストを提供できるようになります。ただし、後者では、 innerText プロパティを使用しましたが、これは許可されていません。

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