jQueryで属性を設定するattrとpropの使い方【サンプルコード有】

jQueryで属性を操作するattr()とprop()メソッドと、2つの違いについてまとめました。

「属性」とは、HTMLタグに付随する「属性="値"」のことです。

<a target="_blank" href="https://kinocolog.com/">ホームページ</a>

このaタグの例では「target="_blank"」や「href="https://kinocolog.com/"」などのことです。

指定した要素の属性を取得する

セレクタで指定した要素の属性を取得したい場合は、$('要素').attr('取得したい属性')または$('要素').prop('取得したい属性')で取得できます。

サンプルコード
<a class="sample1" target="_blank" href="https://kinocolog.com/">ホームページ</a>

<script>
$(function(){
    //targetの値を取得する
    var target1 = $('.sample1').attr('target');
    var target2 = $('.sample1').prop('target');
    console.log(target1);
    console.log(target2);
    
    //hrefの値を取得する
    var href1 = $('.sample1').attr('href');
    var href2 = $('.sample1').prop('href');
    console.log(href1);
    console.log(href2);
});
</script>

参考 console.log()の使い方

指定した要素の属性を変更する

セレクタで指定した要素の属性を変更したい場合は、$('要素').attr('変更したい属性', '変更後の値')で変更できます。

attrをpropに置き換えても同じことが出来ます。

サンプルでは、画像のソースを取得するsrc属性を変更してみました。

サンプルコード
<img class="image2" src="https://kinocolog.com/wp-content/uploads/2019/05/tennis.png">
<input type="button" class="button2" value="画像を変更する">

<script>
$(function(){
    $('.button2').click(function(){
        $('.image2').attr('src', 'https://kinocolog.com/wp-content/uploads/2019/05/soccer.png');

        /*
        同じ処理
        $('.image2').prop('src', 'https://kinocolog.com/wp-content/uploads/2019/05/soccer.png');
        */
    });
});
</script>

複数の属性をまとめて設定する

属性を複数まとめて変更することもできます。

次のサンプルではwidthとheightの属性も指定して、画像の変更と共にサイズを拡大しました。

サンプルコード
<img class="image2" src="https://kinocolog.com/wp-content/uploads/2019/05/tennis.png">
<input type="button" class="button2" value="画像を変更する">

<script>
$(function(){
    $('.button2').click(function(){
        $('.image2').attr({
            'src' : 'https://kinocolog.com/wp-content/uploads/2019/05/soccer.png',
            'width' : '200',
            'height' : '200'
        });
        
        /*
        同じ処理
        $('.image2').prop({
            'src' : 'https://kinocolog.com/wp-content/uploads/2019/05/soccer.png',
            'width' : '200',
            'height' : '200'
        });
        */
    });
});
</script>

attrとpropの違い

ここまでattr()とprop()を並べて全く同じメソッドと思われたかもしれませんが、実は少し違います。

この2つのメソッドには、解釈が異なる属性があります。

例えば、

  • 入力不可の状態を表す「disabled」
  • チェックボックスのチェック状態を表す「checked」

といった、「状態」を表す属性は、attr()とprop()で処理が異なります。

サンプルコード
<input type="text" name="text1">
<input type="text" name="text2" disabled>

<input type="checkbox" name="check1">
<input type="checkbox" name="check2" checked>

<script>
$(function(){
    console.log('↓入力可能なテキストボックス↓');
    console.log( 'attr:' + $('[name="text1"]').attr('disabled') );
    console.log( 'prop:' + $('[name="text1"]').prop('disabled') );
    
    console.log('↓入力不可なテキストボックス↓');
    console.log( 'attr:' + $('[name="text2"]').attr('disabled') );
    console.log( 'prop:' + $('[name="text2"]').prop('disabled') );
    
    console.log('↓未チェックのチェックボックス↓');
    console.log( 'attr:' + $('[name="check1"]').attr('checked') );
    console.log( 'prop:' + $('[name="check1"]').prop('checked') );
    
    console.log('↓チェック済みのチェックボックス↓');
    console.log( 'attr:' + $('[name="check2"]').attr('checked') );
    console.log( 'prop:' + $('[name="check2"]').prop('checked') );
});
</script>

比較してみると、attr()は属性がアクティブでない場合は「undefined」を返してしまっています。
これは、例えばチェック状態ではないチェックボックスには「checked」という属性自体が存在していないからです。

それに対して、prop()は属性がアクティブの場合は「true」、そうでない場合は「false」という真偽値を返しています。

attr()は、htmlに書かれた純粋な値を取得し、prop()は「状態変化」には真偽値として返す、といった処理の違いがあります。

そのため、「状態の変化」が起きるフォームの操作では、prop()メソッドを活用しましょう。

prop()の真偽値による返り値は、例えばチェックボックスにチェックが入っているか、などの判定で使用できます。

サンプルコード
<input type="checkbox" name="check_test" value="apple">チェック
<input type="button" class="button_test" value="チェックが入っているか判定する">

<script>
$(function(){
    $('.button_test').click(function(){
        if($('[name="check_test"]').prop('checked')){
            alert('checked!');
        }else{
            alert('not checked!');
        }
    });
});
</script>
チェック
jQueryでチェックボックスの取得・判定・イベントまとめ【サンプル有】
jQueryのinput[type=checkbox]要素の操作についてサンプル付きでまとめました。チェックボックスの制御についてご確認ください。

属性を削除するremoveAttr()

指定した要素の属性そのものを削除したい場合は、removeAttr()という専用のメソッドを使用します。

サンプルコード
<div class="sample_div3">
    <a class="sample3" target="_blank" href="https://kinocolog.com/">ホームページ</a>
</div>
<script>
$(function(){
    console.log( $('.sample_div3').html() );
    $('.sample3').removeAttr('target');
    console.log( $('.sample_div3').html() );
});
</script>

状態を削除するremoveProp()

指定した状態を削除したい場合は、removeProp()という専用のメソッドを使用します。

状態とはdisabledやcheckedといったフォームの現状を指します。

サンプルコード
<input type="text" name="test_input" disabled>
<input type="button" class="test_btn" value="disabledを削除する">
<script>
$(function(){
    $('.test_btn').click(function(){
        $('[name="test_input"]').removeProp('disabled');
    });
});
</script>

attr()とprop()の使い方と違いについてまとめました。

それぞれの仕様を理解して使いこなしてみましょう。

以上、jQueryで属性を設定するattrとpropの使い方、でした。

コメント

タイトルとURLをコピーしました