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

2019-06-07JavaScriptjQuery

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

attr()の使い方

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

.attr( name )

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

HTML
<span id="example1" name="namae">World</span>
JS
// attr 値取得
var spanid = $('span').attr('id');
var spanname = $('#example1').attr('name');
console.log(spanid);
console.log(spanname);
コンソールに表示される結果
“example1"
“namae"

.attr( name, value )

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

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

HTML
<span id="example2" name="namae">Hello!</span>
JS
// attr 属性値値セット
$('span').attr("style","color:red");
var spanattr = $('#example2').attr('id', 'ex2');
console.log(spanattr[0]);
コンソールに表示される結果
“<span id=’ex2′ name=’namae’ style=’color:red’>Hello!</span>"

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

.attr( map )

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

HTML
<input>
JS
// attr 属性値をまとめてセットする
var result =
    $('input').attr({
    id: 'aaa',
    class: 'on',
    type: 'text',
    value: 'テキストーーー',
    style: "color:blue"
});
console.log( result[0] );
コンソールに表示される結果
“<input id=’aaa’ class=’on’ type=’text’ value=’テキストーーー’ style=’color:blue’>"

prop()の使い方

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

.prop( name )

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

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

HTML
<label><input type="checkbox">チェックボックス</label>
JS
// prop プロパティ値を取得
console.log($(':checkbox').prop('checked'));
コンソールに表示される結果
false

.prop( name, value )

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

HTML
<button id="btn1">ボタン1</button>
<button id="btn2" disabled>ボタン2</button>
JS
// 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);
});

結果
ボタン1をクリックするとボタン1はdisabledになり、ボタン2が有効化する
ボタン2をクリックするとdisabledになり、ボタン1が有効化する

.prop( map )

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

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

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

HTML
<button id="btn1">ボタン1</button>
<button id="btn2" disabled>ボタン2</button>
JS
// prop プロパティ値を、functionの戻り値に設定する
//チェックボックスのチェック状態を反転させる。
$('#btn3').on('click', function() {
   $('.ckb').prop("checked", function( i, val ) {
     return !val;
   });
});

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

結果
「チェック反転」ボタンをクリックすると、CheckBox1とCheckBox2のチェック状態が反転する


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'));
});

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

コンソールに表示される結果

チェックありの時
“prop:true"
“attr:checked"

チェックなしの時
“prop:false"
“attr:undefined"

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

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

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

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

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

Posted by Agopeanuts