jQuery逆引きリファレンス
要素の属性を操作するには？（attr／removeAttr）
任意の要素の、任意の属性に対して値を設定／取得する方法を解説。また、複数の属性をまとめて設定する方法も説明する。
要素の属性を設定するには、attrメソッドを利用します。例えば、以下はid="logo"である要素に対して、src属性を設定するコードです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<img id="logo" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
$('#logo').attr('src', 'http://www.wings.msn.to/image/wings.jpg');
});
</script>
</body>
</html>
|
attrメソッドでは、style／class属性を指定することも可能ですが、これらの属性については専用で用意されているcss／addClassなどのメソッドを利用することをお勧めします。
複数の属性をまとめて設定する
{ 属性名: 値... }形式のハッシュを渡すことで、複数の属性をまとめて設定することもできます。
|
$('#logo').attr({
'src': 'http://www.wings.msn.to/image/wings.jpg',
'title': 'WINGSプロジェクト'
});
|
属性の現在値を取得する
attrメソッドでは、属性を設定するだけではありません。以下のように属性名を文字列で指定することで、現在値を取得することもできます。
|
console.log($('#logo').attr('title')); // 結果：WINGSプロジェクト
|
$()関数が複数の要素にマッチした場合にも、attrメソッドが取得するのは「最初の要素についてだけ」である点に注意してください。
属性を削除する
既存の属性を削除するならば、removeAttrメソッドを利用します。removeAttrメソッドでは、削除する属性が単一であれば文字列で、複数であれば空白区切りの文字列で指定します。
|
// title属性を削除
$('#logo').removeAttr('title');
// src／title属性を削除
$('#logo').removeAttr('src title');
|
引数に空白区切りの文字列を指定できるのは、jQuery 1.7以降です。
API：.attr() カテゴリ：CSS｜Attributes（属性）｜Manipulation（要素の操作） > General Attributes（一般属性）
API：.removeAttr() カテゴリ：CSS｜Attributes（属性）｜Manipulation（要素の操作） > General Attributes（一般属性）
※以下では、本稿の前後を合わせて5回分（第5回～第9回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
5. 要素のスタイルプロパティを変更するには？（css）
背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。
6. 要素にスタイルクラスを適用／除外するには？（addClass／removeClass／toggleClass／hasClass）
要素にclass属性の値を設定／削除する方法を解説。また、その設定状態を切り替えたり、確認したりする方法も説明する。
7. 【現在、表示中】≫ 要素の属性を操作するには？（attr／removeAttr）
任意の要素の、任意の属性に対して値を設定／取得する方法を解説。また、複数の属性をまとめて設定する方法も説明する。
8. 要素のプロパティを取得／設定するには？（prop）
任意の要素に対してJavaScriptのプロパティを設定／取得する方法を解説。また、要素の属性を設定／取得できるattrメソッドと機能を比較する。
9. 要素の高さ／幅を設定／取得するには？（height／width／innerHeight／innerWidth／outerHeight／outerWidth）
任意の要素に対して幅／高さを設定／取得する方法を解説。また、height／width、innerHeight／innerWidth、outerHeight／outerWidthメソッドの使い分け方法も説明する。
