.attr()で属性を操作しよう!

.attr()で属性を操作しよう!

.attr()は、セレクタに一致した最初の要素の属性値を取得、属性を設定するメソッドです

属性を取得するには?

hrefを取得するサンプル

<a href="#attr">.attr()</a>
$('a').attr('href')

属性を取得するには、.attr()に属性名を渡します。

サンプルでは、href属性の’#attr’が取得されます。

属性を設定するには?

$('a').attr('href', '#attr-changed');

属性を設定するには、第2引数に値を渡します。

オブジェクトで設定する

$('a').attr({
    href: '#attr-changed',
    target: '_blank'
});
<a href="#attr-changed" target="_blank">.attr()</a>

属性名をプロパティとするオブジェクトを渡して設定することもできます。

コールバック関数で設定する

// 元のHTML
<ul>
    <li class="default"></li>
    <li class="default"></li>
    <li class="default"></li>
</ul>
$('li').attr('class', function(index, attr) {
    if(index === 1) {
        return 'active';
    } else {
        return attr;
    }
});
// 設定後のHTML
<ul>
    <li class="default"></li>
    <li class="active"></li>
    <li class="default"></li>
</ul>

第2引数にコールバック関数を渡し、戻り値を属性に設定することもできます。

コールバック関数の第1引数は、0から始まるjQueryオブジェクトのインデックス、第2引数は元の属性値です。

サンプルでは、インデックスが1、つまり2番目のオブジェクトの場合、’active’を返し、それ以外の場合は元の属性値を返しています。

属性を削除するには?

$('a').attr('href', null);

属性を削除するには、第2引数にnullを渡します。

$('a').removeAttr('href');

.removeAttr()に属性名を渡すことでも削除できます。

checked, selected, disabledには.prop()を使おう!

.attr()でcheckedを取得する

<input type="checkbox" class="not-checked" />
<input type="checkbox" class="checked" checked />
console.log($('.not-checked').attr('checked'));
console.log($('.checked').attr('checked'));
undefined
checked

.attr()でchecked属性を取得し、console.logでコンソール出力しています。

checked属性がない要素はundefined, checked属性がある要素はcheckedが取得されます。

ユーザーがチェック状態を変更しても、取得される内容は変わりません。

.prop()でcheckedを取得する

console.log($('.not-checked').prop('checked'));
console.log($('.checked').prop('checked'));
false
true

checked属性がない要素はfalse, checked属性がある要素はtrueが取得されます。

.attr()の場合とは異なり、ユーザーがチェックすればtrue, チェックを外せばfalseを返します。

.prop()でdisabledに設定する

$('input').prop('disabled', true);

disabledをtrueに設定し、input要素を無効にしています。

true, falseを使用する以外、.attr()での設定と同様です。

属性値の状態を取得、設定するときには、.prop()を使用しましょう。

classには.addClass(), .removeClass(), .hasClass()を使おう!

// 元のHTML
<span class="old"></span>
$('a').attr('class', 'new');
// 設定後のHTML
<span class="new"></span>

classも属性なので、.attr()で制御することができます。

ただし、class属性を全て書き換えてしまうため、場合によっては不便です。

.addClass()でclassを追加しよう!

$('a').addClass('new');
<span class="old new"></span>

classのoldを残したままnewを追加できます。

.removeClass()でclassを削除しよう!

// 元のHTML
<span class="class-1 class-2"></span>
$('span').removeClass('class-1');
// 削除後のHTML
<span class="class-2"></span>

class-2を残したままclass-1を削除できます。

.hasClass()でclassの有無を確認しよう!

$('span').hasClass('class-1');

classにclass-1があればtrue, なければfalseを返します。

カスタムデータ属性は.data()で変更しよう!

// 元のHTML
<span data-value=""></span>
$('span').attr('data-value', 'attr-value');
// 設定後のHTML
<span data-value="attr-value"></span>

カスタムデータ属性も属性なので、.attr()で制御できます。

$('span').data('value', [1, 2, 3]);

$('span').data('value', {
    key_1: 'value_1',
    key_2: 'value_2'
});

配列やオブジェクトを設定したい場合、.data()を使います。

.data()を使った場合、属性値は変更されないことに注意しましょう。

スタイルは.css()で変更しよう!

$('div').attr('style', 'background-color: red;');

style属性を第1引数に渡すことで、スタイルを変更することができます。

ただし、style属性が全て上書きされてしまう点、セミコロン区切りでスタイルを記述する必要がある点が不便です。

スタイルを変更するには.css()を使用しましょう。

まとめ

  • 属性を取得するには.attr(name)を使用します。
  • 属性を設定するには、第2引数に値を指定します。
  • 属性を削除するには、値にnullを指定するか、.removeAttr()を使用します。
  • checked, selected, disabledには.prop()を使用します。
  • classには.addClass(), .removeClass(), .hasClass()を使用します。
  • カスタムデータ属性は.data()で変更します。
  • スタイルは.css()で変更します。

メソッドカテゴリの最新記事