[jQuery] attr()とprop()の使い方と違い

2019-06-072019-12-07JavaScriptjQuery

attr()、prop()は、HTML要素のプロパティや属性値を取得したり、設定したりするjQueryのメソッドである。どちらも似たようなメソッドだが、それぞれの使い方と違いをまとめた。

attr()の使い方

「attr()」は、HTML要素の属性を取得したり、設定することができるメソッド

.attr( name )

nameという属性の値を取得したいする

<span id="example1" name="namae">World</span>

// attr 値取得
var spanid = $('span').attr('id');
var spanname = $('#example1').attr('name');
console.log(spanid);
console.log(spanname);

.attr( name, value )

nameという属性の値に、valueで指定した値を設定する

name：値を設定する属性
value：設定する値

<span id="example2" name="namae">Hello!</span>

// attr 属性値値セット
$('span').attr("style","color:red");
var spanattr = $('#example2').attr('id', 'ex2');
console.log(spanattr[0]);

spanタグのidが、「example2」→「ex2」に変わった。
「style=’color:red’」が追加され、文字色が赤くなる

.attr( map )

属性値をまとめて設定する

<input>

// attr 属性値をまとめてセットする
var result =
    $('input').attr({
    id: 'aaa',
    class: 'on',
    type: 'text',
    value: 'テキストーーー',
    style: "color:blue"
});
console.log( result[0] );

prop()の使い方

属性プロパティに値を設定する、または設定されている値を取得する

.prop( name )

nameに指定した名前のプロパティ値を取得

マッチする要素が複数ある場合、最初に見つかった要素のプロパティのみを取得する。 各要素のプロパティ値を取得する場合は、.each()や.map()を使用する。

<label><input type="checkbox">チェックボックス</label>

// prop プロパティ値を取得
console.log($(':checkbox').prop('checked'));

.prop( name, value )

nameで指定したプロパティに、valueで指定した値を設定する

<button id="btn1">ボタン１</button>
<button id="btn2" disabled>ボタン2</button>

// prop プロパティ値を設定
$('#btn1').on('click', function() {
   $(this).prop('disabled', true);
   $('#btn2').prop('disabled', false);
});
$('#btn2').on('click', function() {
   $(this).prop('disabled', true);
   $('#btn1').prop('disabled', false);
});

.prop( map )

プロパティ名と値のペアを複数指定できるので、まとめて値を設定できる

.prop( name, function(index, prop))

nameで指定したプロパティに、関数（function）の戻り値を設定できる。
戻り値が無い、またはundefinedの場合、プロパティ値は変更されない。

<button id="btn1">ボタン１</button>
<button id="btn2" disabled>ボタン2</button>

// prop プロパティ値を、functionの戻り値に設定する
//チェックボックスのチェック状態を反転させる。
$('#btn3').on('click', function() {
   $('.ckb').prop("checked", function( i, val ) {
     return !val;
   });
});

function( i, val ) {では、チェックボックスのチェック状態を取得し、反対のチェック状態を返す（returnしている）

attr()とprop()の違い

propはproperty（プロパティ）の略で、attrはattribute（属性）の略。

jQuery1.6では、attr()は初期状態の属性値しか取得できなかった。例えば、チェックボックスのチェック状態が変わっても最初の状態しか取れない。
jQuery1.6.1以上では、attr()でも状態が変化すれば、変化後の属性値を取得できるようになったため、prop()と同じようなに動くようにはなった。

しかし今でも、2つの違いは、同じ属性値を取得した時に返ってくる値が異なるという点。
（attr()はHTML的な値で、prop()はJavaScript的な値となっているらしい。）

例えば、チェックボックスがあって、下記JSを実行すると、

$(":checkbox").click(function() {
   console.log("prop:"+$(this).prop('checked'));
   console.log("attr:"+$(this).attr('checked'));
});

属性値は以下のように返ってくる。

attr()は属性値がない場合、「"undefined"」が返ってくるが、prop()は、真か偽が返ってくる。

さらに、attr()で「"checked"」を設定する場合、以下のように書く

$('.ckb').attr('checked','checked');

取得できる値の違いにより、attr()では思ったような動きにならない場合があったためchecked、disabled、selectedといったプロパティの操作に、attr()を使うのは推奨されなくなった。

また、checkedや、disabledの処理にattr()を使うと、速度が遅いらしい。