JavaScript/jQueryでimg要素のsrc属性を変更するにはどうすればよいですか?

JavaScript と jQuery を使用すると、HTML ドキュメントの 要素の src 属性で指定された画像パスを変更するさまざまな方法があります。

JavaScriptを使用してimg要素のsrc属性を変更する方法-

• JavaScript で src 属性を使用します。

jQueryを使ってimg要素のsrc属性を変更する方法-

• attr() メソッドを使用する

• prop() メソッドを使用します

img 要素の src を変更する上記の方法を 1 つずつ詳しく説明します。

JavaScript での src 属性の使用

JavaScript を使用すると、 src 属性を使用して、それに割り当てられている値を取得したり、同じ属性の値を更新または変更したりすることができます。これは、img 要素の src 属性の値を変更する非常に一般的な方法です。

＃＃＃構文＃＃＃

次の構文は、JavaScript で src 属性を使用して img 要素の src 属性の値を変更する方法を説明します -

リーリー

コード例を通じて、このアプローチの実際の実装を理解しましょう。

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

ステップ 1

-最初のステップでは、src 属性が関連付けられた img 要素を追加します。この値は、後で JavaScript の src プロパティを使用して変更します。

• ステップ 2

  - このステップでは、onclick イベントを持つボタン要素を追加し、ユーザーがボタンをクリックしたときに画像のソースを変更する関数を呼び出します。

• ステップ 3

  - 次のステップでは、ID を使用して img 要素を取得し、2 つの画像間の切り替えを使用して src 属性を変更する JavaScript 関数を定義します。

• ステップ 4

  -最後のステップでは、最後のステップで定義した onclick イベントに関数を割り当て、ユーザー画面上の変更を確認します。
• Example

  の中国語訳は次のとおりです: Example

  次の例では、JavaScript で src 属性を実際に使用して、img の src 属性を変更する方法を説明します。
リーリー

この例では、JavaScript の src 属性を使用して、HTML ドキュメントの img 要素の src 属性を変更します。ここでは、ボタンをクリックするたびに 2 つの画像を切り替えます。

jQuery での attr() メソッドの使用

JavaScript の attr() メソッドを使用して src 属性を変更することもできます。

attr() メソッド

- attr() メソッドは 2 つのパラメータを受け入れます。最初のパラメータは文字列形式で表された変更する属性の名前で、もう 1 つのパラメータは変更する新しい値です。属性値に割り当てられます。

＃＃＃構文＃＃＃

次の構文は、パラメーターを含む attr() メソッドがどのように実装されるかを説明します-

リーリー

コード例を通じて、このメソッドの実装を詳しく理解しましょう。

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

ステップ 1

- ドキュメントの

要素の

に jQuery リンク

を追加します。

ステップ 2
• - このステップでは、src 属性を持つ img 要素を使用し、後で jQuery の attr() メソッドを使用してそれを変更します。

• ステップ 4 -次のステップでは、jQuery の

  "$"
構文を使用して各要素を取得し、各要素に対してタスクを実行します。

• ステップ 5
-最後のステップでは、jQuery の
• on()

  メソッドを使用して、onclick イベントをボタンに割り当てます。これにより、ユーザーがボタンをクリックしたときに、ボタンをクリックすると、そこに指定された関数が呼び出され、変更がユーザーに表示されます。 Example

  の中国語訳は次のとおりです:
Example

• 次の例は、jQuery で attr() メソッドを使用して img 要素の src 属性を変更する方法を示しています。 リーリー jQuery で prop() メソッドを使用する attr() メソッドと同様に、jQuery には属性の値を新しい値に変更する prop() メソッドも用意されています。

prop() メソッド

- prop() メソッドは、前の例で attr() メソッドを使用したように使用できます。プロパティ名とパラメータとして割り当てられる新しい値を受け取ります。

prop() メソッドを使用して、単一のプロパティまたは複数のプロパティに値を設定できます。

＃＃＃構文＃＃＃

次の構文は、prop() メソッドをさまざまな目的に使用する方法を示します。 -

特定の属性の値を変更する

−

リーリー

複数の属性の値を変更する - リーリー

2 番目の構文では、複数のプロパティに新しい値を同時に提供します。

コード例を通じて prop() メソッドの使用法について詳しく学びましょう。

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

この例のアルゴリズムは、前の例のアルゴリズムとほぼ同様です。前のアルゴリズムの attr() メソッドを prop() メソッドに置き換えるだけで、作業は完了します。

Example

の中国語訳は次のとおりです: Example

次の例では、prop() メソッドが HTML ドキュメントの img 要素の src 属性の値をどのように変更するかを説明します -

リーリー 上記の例では、jQuery の prop() メソッドを使用して、HTML ドキュメントの img 要素の src 属性を変更しました。

この記事では、JavaScript と jQuery を使用して img 要素の src 属性の値を変更する 3 つの異なる方法について説明しました。コード例内で実際に実装することで、すべてのメソッドを詳細に理解しました。これは、概念の実践的な知識を構築するのに役立ちます。

以上がJavaScript/jQueryでimg要素のsrc属性を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。