ywork2020.com

Title

要素の属性値を操作する

目次 (INDEX)

attr とは

ここで説明する attr とは次の語句からなる jQuery のメソッドです。
attribute
読み: アトリビュート
意味: 属性

目次に戻る

attr メソッドの概要

このメソッドは、要素の属性の値を取得、または設定することができます。

attr とは attribute の略であり、「 属性の 」 といった意味をもつ単語です。 同義語として 「 property 」 がありますが、どちらも属性という意味で使われます。

なお、同義語の property の意味をもち、同じ働きをする prop メソッドもあります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var attrValue = $(Selector).attr(attributeName);
$(Selector).attr(attributeName, setAttributeValue);

目次に戻る

サンプルコードと実行結果

サンプルコード: HTML
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	サムネイル:<br>
	<img class="clsImgSmall" src="../images/hota1.jpg" alt="猫のイラストサムネイル1" width="10%">
	<img class="clsImgSmall" src="../images/hota2.jpg" alt="猫のイラストサムネイル2" width="10%">
	<img class="clsImgSmall" src="../images/hota3.jpg" alt="猫のイラストサムネイル3" width="10%">
	<img class="clsImgSmall" src="../images/hota4.jpg" alt="猫のイラストサムネイル4" width="10%">
	<img class="clsImgSmall" src="../images/hota5.jpg" alt="猫のイラストサムネイル5" width="10%"><br>
	拡大画像:<br>
	<img id="idImgBig" src="../images/hota1.jpg" alt="猫のイラスト拡大画像" width="30%"><br>
	src値: <output id="idAnswer">innerText</output>
</body>
サンプルコード: script
<script>
	$(".clsImgSmall").mouseover(function(){
		$("#idImgBig").attr("src", this.src);
		$("#idAnswer").text($("#idImgBig").attr("src"));
	});
</script>

サムネイル:
猫のイラストサムネイル1 猫のイラストサムネイル2 猫のイラストサムネイル3 猫のイラストサムネイル4 猫のイラストサムネイル5
拡大画像:
猫のイラスト拡大画像
src 値: innerText

サンプルではマウスオーバーイベントの処理をしていますが、このページでの説明は省略します。 重要なのはコードの下記の部分です。構文と比較すると理解しやすいと思います。

属性値の代入文→ $(セレクター).attr("属性名", 代入値);
サンプル代入文→ $("#idImgBig").attr("src", this.src);

属性値の取得文→ $(セレクター).attr("属性名");
サンプル取得文→ $("#idImgBig").attr("src");

目次に戻る