jQuery入門 | CSSスタイルおよびプロパティ設定 | プロパティ設定 .attr() .prop()

プロパティ設定

次のメソッドを使用すると、特定プロパティの値を取得または設定できる。

.attr()と.removeAttr()メソッド

.attr()メソッドは、選択した要素に指定された属性値を返すか、選択した要素の指定された属性を渡された値に設定する。

.removeAttr()メソッドは、選択した要素の属性値を削除する。

次の例は、.attr()メソッドを利用して属性値を設定および返却し、.removeAttr()メソッドを利用して削除する。

$("#btnSetter").on("click", function() {
  $("span").attr("title", (++count) + "回クリックしました。");  // 属性値設定
});
$("#btnGetter").on("click", function() {
  $("p").text($("span").attr("title"));  // 属性値返却
});
$("#btnRemove").on("click", function() {
  $("span").removeAttr("title"); // 属性削除
});

コードを実行

.prop()と.removeProp()メソッド

.prop()メソッドはjQuery 1.6から新しく定義されたメソッドである。 このメソッドは、選択した要素集合の最初の要素の指定されたプロパティ値を返すか、選択した要素の指定されたプロパティを渡された値に設定する。

.removeProp()メソッドはプロパティを削除する。

$("#btnSetter").on("click", function() {
  $('input[type="checkbox"]').prop({checked: true}); // プロパティ設定
});
$("#btnGetter").on("click", function() {
  $("p").text($('input[type="checkbox"]').prop("checked")); // プロパティ返却
});
$("#btnRemove").on("click", function() {
  $('input[type="checkbox"]').removeProp("checked"); // プロパティ削除
});

コードを実行

属性とプロパティの違い

.attr()メソッドと.prop()メソッドの違いを理解するには、まず属性とプロパティの違いを知る必要がある。

属性

属性とは、HTML要素の追加情報を持つ名前と値のペアを意味する。

次の<input>要素はcheckedという属性を持ち、その属性値は"checked"である。

<input type="checkbox" name="chk" checked="checked">

プロパティ

プロパティとは、上のような属性をオブジェクト化したときのHTML DOMツリー内部の値を指す。

次の例で、該当チェックボックスがチェックされていれば、checkedプロパティ値はtrueである。

<input type="checkbox" name="chk" checked="checked">

つまり、属性はHTML文書に存在し値が変わらないが、プロパティはHTML DOMツリーに存在し、その値が変わることがある。

たとえば、ユーザーがHTML文書内の<input>要素をチェックしたり、JavaScriptを利用して値を変更したりすると、属性値は変わらないがプロパティの値は変わる。

.attr()メソッドと.prop()メソッドの違い

jQuery 1.6以前は、.attr()メソッドを使用するとき、不正確な動作を起こすいくつかの属性について、該当するプロパティ値まで考慮してコードを書く必要があった。 jQuery 1.6以降、.attr()メソッドは属性だけを扱い、新しく提供される.prop()メソッドを利用してプロパティ値を扱う方法で、このような問題を解決した。

次の例は、チェックボックスが変更されるたびに属性値とプロパティ値がどのように変わるかを確認できる例である。

$('input[type="checkbox"]').change(function() {
  var html = "checked属性値: " + $(this).attr("checked") +"<br>";
  html += "checkedプロパティ値: " + $(this).prop("checked");
  $("p").html(html);
}).change();

コードを実行

参考

• http://api.jquery.com/attr/
• http://api.jquery.com/removeattr/
• http://api.jquery.com/prop/
• http://api.jquery.com/removeprop/