jQuery attr() メソッド

jQuery attr() メソッド詳解：HTML 属性を簡単に取得・設定

この文書では、jQuery において HTML 要素の属性を取得・設定するために使用する attr() メソッドについて、構文、パラメータ、使用方法、注意点、および実際の適用例を含めて詳しく解説し、このよく使用されるメソッドを素早くマスターできるようにします。

目次

  1. attr() メソッドとは？
  2. attr() メソッドの構文とパラメータ
  3. attr() メソッドで属性値を取得する
  4. attr() メソッドで属性値を設定する
  5. attr() メソッドで複数の属性を設定する
  6. コールバック関数を使用して属性値を設定する
  7. attr() メソッドの注意点
  8. attr() メソッドの実際の適用例
  9. よくある質問

1. attr() メソッドとは？

attr() メソッドは、jQuery において HTML 要素の属性を操作するために使用されます。属性とは、HTML タグ内に記述される name/value ペアで、要素に関する追加情報を提供します。例えば、<a href="https://www.example.com"> の href 属性はリンク先 URL を指定します。

attr() メソッドは、HTML 属性を操作するものであり、DOM プロパティとは異なります。DOM プロパティは、JavaScript オブジェクトとして表現された HTML 要素のプロパティです。一般的には、HTML 属性と DOM プロパティは同じ名前を持ちますが、値が異なる場合があります。attr() メソッドは、あくまでも HTML 属性を操作します。

2. attr() メソッドの構文とパラメータ

attr() メソッドは、属性値を取得する場合と設定する場合で、2 つの構文形式があります。

属性値を取得する

$(selector).attr(attributeName);

属性値を設定する

$(selector).attr(attributeName, value);
$(selector).attr(attributeName, function(index, attr));
$(selector).attr({attributeName1: value1, attributeName2: value2, ...});

パラメータの説明

パラメータ 説明
selector 属性を取得・設定する対象の HTML 要素を指定するセレクタ。
attributeName 取得・設定する属性の名前。文字列で指定。
value 設定する属性の値。文字列、数値、真偽値などを指定可能。
function(index, attr) 属性値を設定する際に使用するコールバック関数。要素のインデックスと現在の属性値を引数として受け取り、新しい属性値を返す。

コード例

<a id="myLink" href="https://www.example.com">リンク</a>

<script>
// href 属性の値を取得
var linkUrl = $('#myLink').attr('href'); 
console.log(linkUrl); // 出力: https://www.example.com

// href 属性の値を設定
$('#myLink').attr('href', 'https://www.google.com'); 

// 複数の属性を設定
$('#myLink').attr({
  'href': 'https://www.yahoo.co.jp',
  'target': '_blank'
}); 
</script>

3. attr() メソッドで属性値を取得する

attr() メソッドで属性値を取得するには、取得したい属性名を引数に指定します。戻り値は、指定した属性の値になります。属性が存在しない場合は undefined が返ります。

コード例

<img id="myImage" src="image.jpg" alt="画像の説明">

<script>
var imgSrc = $('#myImage').attr('src');
console.log(imgSrc); // 出力: image.jpg

var imgAlt = $('#myImage').attr('alt');
console.log(imgAlt); // 出力: 画像の説明
</script>

4. attr() メソッドで属性値を設定する

attr() メソッドで属性値を設定するには、設定したい属性名と値を引数に指定します。既に属性が存在する場合は、値が上書きされます。属性が存在しない場合は、新しく属性が追加されます。

コード例

<a id="myLink" href="https://www.example.com">リンク</a>

<script>
// href 属性の値を変更
$('#myLink').attr('href', 'https://www.google.com'); 

// title 属性を追加
$('#myLink').attr('title', 'Google へのリンク'); 
</script>

5. attr() メソッドで複数の属性を設定する

attr() メソッドでは、オブジェクトリテラルを使用して一度に複数の属性を設定することができます。オブジェクトリテラルは、{key1: value1, key2: value2, ...} のように、キーと値のペアをカンマ区切りで記述します。

コード例

<img id="myImage" src="image.jpg">

<script>
$('#myImage').attr({
  'src': 'new-image.png',
  'alt': '新しい画像',
  'width': '300'
}); 
</script>

6. コールバック関数を使用して属性値を設定する

attr() メソッドでは、コールバック関数を使用して属性値を動的に設定することができます。コールバック関数は、要素のインデックスと現在の属性値を引数として受け取り、新しい属性値を返します。

コード例

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

<script>
$('li').attr('title', function(index, attr) {
  return '項目' + (index + 1) + 'の説明';
}); 
</script>

7. attr() メソッドの注意点

  • attr() メソッドは HTML 属性を操作するものであり、DOM プロパティとは異なります。DOM プロパティを操作する場合は、prop() メソッドを使用します。
  • ブール型の属性 (checked, selected, disabled など) を操作する場合は、prop() メソッドを使用することをお勧めします。attr() メソッドを使用すると、予期しない動作をする可能性があります。

コード例

<input type="checkbox" id="myCheckbox">

<script>
// チェック状態を設定 (prop() メソッドを使用)
$('#myCheckbox').prop('checked', true); 

// チェック状態を取得 (prop() メソッドを使用)
var isChecked = $('#myCheckbox').prop('checked'); 
console.log(isChecked); // 出力: true
</script>

8. attr() メソッドの実際の適用例

画像リンクを取得し、画像サイズを変更する

<img id="myImage" src="image.jpg" width="200" height="150">

<script>
var imgSrc = $('#myImage').attr('src'); 

// 画像の幅と高さを変更
$('#myImage').attr('width', '400'); 
$('#myImage').attr('height', '300'); 
</script>

CSS クラス名を動的に追加・削除する

<div id="myDiv" class="box">ボックス</div>

<script>
// active クラスを追加
$('#myDiv').addClass('active'); 

// box クラスを削除
$('#myDiv').removeClass('box'); 
</script>

9. よくある質問

Q1. attr() メソッドと prop() メソッドの違いは？

A1. attr() メソッドは HTML 属性を操作し、prop() メソッドは DOM プロパティを操作します。一般的には、HTML 属性と DOM プロパティは同じ名前を持ちますが、値が異なる場合があります。特に、ブール型の属性 (checked, selected, disabled など) を操作する場合は、prop() メソッドを使用する必要があります。

Q2. attr() メソッドで複数の属性を設定するにはどうすればよいですか？

A2. オブジェクトリテラルを使用することで、attr() メソッドで複数の属性を一度に設定することができます。例えば、$('#myElement').attr({ 'src': 'image.jpg', 'alt': '画像の説明' }); のように記述します。

Q3. attr() メソッドで属性値を動的に設定するにはどうすればよいですか？

A3. コールバック関数を使用することで、attr() メソッドで属性値を動的に設定することができます。コールバック関数は、要素のインデックスと現在の属性値を引数として受け取り、新しい属性値を返します。