ホームページ > 記事 > ウェブフロントエンド > jqueryでimg画像を変更する方法
jqueryでimg画像を変更する方法
- PHPzオリジナル
- 2023-04-26 14:22:241648ブラウズ
jQuery はフロントエンド開発で広く使われている JavaScript ライブラリで、HTML 要素を簡単に操作できる豊富な API を提供します。フロントエンド開発では、多くの場合、Web ページ上の画像を変更する必要があります。この記事では、jQueryを使って要素のsrc属性を変更して画像を置き換える方法を紹介します。
1. .attr() メソッドを使用して画像の src 属性を変更する
jQuery には、HTML 要素の属性値を取得または設定するための .attr() メソッドが用意されています。このメソッドは、 要素の src 属性を変更できます。以下は簡単なサンプル コードです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery修改图片</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
//点击按钮时，修改图片的src属性
$("#btn").click(function(){
$("img").attr("src","new_image.jpg");
});
});
</script>
</head>
<body>
<img src="old_image.jpg">
<button id="btn">替换图片</button>
</body>
</html>
上記のコードでは、ボタンをクリックすることによって画像の src 属性が変更されます。 .attr() メソッドを使用する場合、最初のパラメータは変更する属性名、2 番目のパラメータは設定する属性値です。コードを実行した後、ボタンをクリックして画像を「new_image.jpg」という名前の新しい画像に置き換えます。新しいイメージ ファイルが存在し、古いイメージ ファイルと同じディレクトリに存在することを確認する必要があることに注意してください。
2. .prop() メソッドを使用して画像の src 属性を変更する
.attr() メソッドの使用に加えて、.prop() メソッドも使用できます。画像の src 属性を変更します。 .prop() メソッドは、属性の値を取得または設定するために使用されますが、同時に .disabled 属性や .checked 属性などの HTML 要素の固有の属性を変更するためにも使用できます。以下は、.prop() メソッドを使用して画像置換を実装する例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery修改图片</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
//点击按钮时，修改图片的src属性
$("#btn").click(function(){
$("img").prop("src","new_image.jpg");
});
});
</script>
</head>
<body>
<img src="old_image.jpg">
<button id="btn">替换图片</button>
</body>
</html>
上記のコードは、基本的に .attr() メソッドを使用する例と同じです。唯一の違いは、.prop() メソッドを使用してイメージの src 属性を変更することです。同様に、ボタンをクリックすると、「new_image.jpg」という名前の新しい画像に置き換えられます。
概要
この記事では、jQuery を使用して 要素の src 属性を変更することで画像を置き換える 2 つの方法を紹介します。この関数は、.attr() メソッドと .prop() メソッドの両方を使用して実現できます。どの方法を選択する場合でも、まずセレクターを使用して変更する必要があるイメージ要素を選択し、次に対応するメソッドを使用してその src 属性を変更する必要があります。置き換えられた新しい画像は同じディレクトリに存在する必要があることに注意してください。そうでない場合、画像は表示されません。
以上がjqueryでimg画像を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。