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>
指定した要素の属性を変更する
セレクタで指定した要素の属性を変更したい場合は、$('要素').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>
属性を削除する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の使い方、でした。