jqueryでimgの属性値を変更する方法-フロントエンドQ&A-php.cn

jqueryでimgの属性値を変更する方法

青灯夜游

リリース： 2022-05-25 15:30:40

オリジナル

2659 人が閲覧しました

変更する 2 つの方法: 1. attr() を使用して属性値を変更します。構文は "$("img").attr({属性 1: "value"、属性 2: "value" です。 ...} );"。 2. prop() を使用して属性値を変更します。構文は「$("img").prop({属性 1: "値", 属性 2: "値"...});」です。

jqueryでimgの属性値を変更する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

jqueryでimgの属性値を変更する方法タグは、HTML ページ内の画像を定義します。

<img src="img/1.jpg" alt="多肉" width="200">

ログイン後にコピー

jqueryでimgの属性値を変更する方法

jqueryでimgの属性値を変更する方法タグには、src と alt という 2 つの必須属性があります。 (img タグでサポートされている属性は以下で確認できます)

では、jquery を使用して img の属性値を変更するにはどうすればよいでしょうか? 次に、要素の属性を変更する 2 つの方法を紹介します。

方法 1: attr() を使用して属性値を変更する

変更構文:

//单个属性
$("img").attr("属性名","属性值");

//多个个属性
$("img").attr({属性1:"属性值",属性2:"属性值"....});

ログイン後にコピー

例: 幅と高さを変更する属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
					$("button").click(function() {
						$("img").attr({width:"400",height":"320"});
					});
			});
		</script>
	</head>

	<body>
		<img src="img/1.jpg" alt="多肉" width="200"    style="max-width:90%"><br><br>
		<button>修改width和height属性值</button>
	</body>

</html>

ログイン後にコピー

jqueryでimgの属性値を変更する方法

#方法 2: prop() を使用して属性値を変更する ##構文を変更します:

//单个属性
$("img").prop("属性名","属性值");
//多个个属性
$("img").prop({属性1:"属性值",属性2:"属性值"....});

ログイン後にコピー

例 : src 属性と alt 属性を変更する

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
					$("button").click(function() {
						$("img").prop({src:"img/4.jpg",alt:"晚霞"});
					});
			});
		</script>
	</head>

	<body>
		<img src="img/1.jpg" alt="多肉" width="300"><br><br>
		<button>修改src和alt属性</button>
	</body>

</html>

ログイン後にコピー

jqueryでimgの属性値を変更する方法 #拡張知識: 設定できる属性

属性値説明aligntop Lazy: 遅延読み込みブラウザが画像をすぐに読み込むか、遅延して読み込むかを指定します。 textピクセルHTML5 サポートされていません。 HTML 4.01 は非推奨になりました。 use-credentials画像のクロスドメイン属性を設定しますpixelsピクセルHTML5 サポートされていません。 HTML 4.01 は非推奨になりました。画像をサーバー側のイメージマップとして指定します。 URL 長い画像説明ドキュメントを含む URL を指します。画像を表示する URL を指定します。 #usemap イメージをクライアント側のイメージマップとして定義します。 vspaceHTML5 サポートされていません。 HTML 4.01 は非推奨になりました。画像の上下の余白を指定します。画像の幅を指定します。 Web フロントエンドビデオ


底＃＃＃真ん中＃＃＃左＃＃＃右	HTML5はサポートされていません。 HTML 4.01 は非推奨になりました。周囲のテキストに対して画像をどのように配置するかを指定します。	読み込み中熱心: すぐに読み込みます
	alt
画像の代替テキストを指定します。	border
	画像の周囲の境界線を指定します。	クロスオリジン匿名
	height
画像の高さを指定します。	hspace
	画像の左右の余白を指定します。	ismapismap
	longdesc
#HTML5 サポートされていません。 HTML 4.01 は非推奨になりました。	#src	URL
	#mapname
	ピクセル
	width	pixels
	[推奨学習: jQuery ビデオチュートリアル、	]