[JS] 動的に属性を変更

タグ :

jQuery の勉強をまとめるシリーズです。
今回は動的に要素の属性を変更する API についてまとめます。

属性の追加

jQuery で html 要素の属性の値を追加するには、「attr()」を使用します。
引数には「属性名」と「値」を設定します。

[ 構文 ]
.attr(“属性名”, “値”)
[ コード ]
$(function() {
	$("button").click(function () {
		$("div a").attr("href", "http://yahoo.jp");
	});
});

3行目の attr() でリンク先を可変させます。

<h4>要素の属性の追加</h4>
<div>
	<a href="http://google.jp" target="_blank">googleへのリンク</a>
</div>
<button>変更</button>

3行目の a タグを変更させます。

<div>
	<a href="http://yahoo.jp" target="_blank">googleへのリンク</a>
</div>

a 要素のリンク先が変更されます。

ボタンクリックで href のリンク先が「http://yahoo.jp」へ変更されます。

複数属性の追加

複数の属性を一括で追加するには、css() と同様の記述で可能です。
まずは「{}」で囲み、属性名と値を「:」で区切って指定し。さらに属性間を「,」で区切ります。

[ 構文 ]
.attr(“属性名1” : “値1”, “属性名2” : “値2”, …)
[ コード ]
$(function() {
	$("button").click(function () {
		$("div a").attr({
			"href" : "http://yahoo.jp",
			"style" : "color:red"
		});
	});
});

3行目〜6行目の attr() でリンク先と文字色を可変させます。

<h4>要素の属性の追加(複数)</h4>
<div>
	<a href="http://google.jp" target="_blank">googleへのリンク</a>
</div>
<button>変更</button>

3行目の a タグを変更させます。

<div>
	<a href="http://yahoo.jp" target="_blank" style="color: red">googleへのリンク</a>
</div>

a 要素のリンク先とスタイルが変更されます。

ボタンクリックで href のリンク先が「http://yahoo.jp」に、文字色が赤へと一括で変更します。

属性の除去

jQuery で html 要素の属性を除去するには、「.removeAttr()」を使用します。
引数には、属性名だけを記述します。
また、複数の属性を除去するには、「.」で繋いで記述します。

[ 構文 ]
.removeAttr(“属性名”, “値”)
[ コード ]
$(function() {
	$("button").click(function () {
		$("div a").removeAttr("style").removeAttr("href");
	});
});

3行目の removeAttr() でリンク先と文字色を除去します。

<h4>要素の属性の除去</h4>
<div>
	<a href="http://google.jp" style="color:red" target="_blank">googleへのリンク</a>
</div>
<button>除去</button>

3行目の a タグを変更させます。

<div>
	<a target="_blank">googleへのリンク</a>
</div>

a 要素のリンクとスタイルが除去されます。

ボタンクリックで文字色と、href のリンク先を除去してただのテキストにします。
この例では「target」だけ残ってしまいますので、気になる方は同じように「removeAttr(“target”)」で除去させることができます。
そうなると「a」タグではおかしいということになりますが、そこは置いておきます。。。

まとめ

これで動的にスタイルを変更するのと同じように属性も変更できます。
CSS でも操作できるのですが、イメージのサイズを直接変更したりというのも可能となります。

また、例でもあるようにリンク先を変更することもできるので、動的処理の幅が大きく広がります。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed