jQueryでHTMLの属性を取得／変更する（attrメソッド）

jQueryではHTML DOM要素のあらゆる属性を操作することができます。
この記事では、jQueryを使ってHTML DOM要素の属性を変更する方法を紹介します。

1 属性の操作について
2 属性の取得
- 2.1 書式（構文）
- 2.2 サンプルコード
3 スタイルの設定（指定）
- 3.1 書式（構文）
- 3.2 サンプルコード
4 属性の一括設定（指定）
- 4.1 サンプルコード
5 属性の削除
- 5.1 書式（構文）
- 5.2 サンプルコード

属性の操作について

jQueryで属性を操作するにはattrメソッドを使用します。
指定したセレクタにマッチするDOM要素の属性をattrメソッドで取得または設定（指定）することができます。

属性の取得

attrメソッドで対象のDOM要素の属性を取得する際は、attrメソッドのパラメーターに属性の名前を指定します。

書式（構文）

// 属性の取得
const attribute = $('セレクタ').attr('属性名');

1 2	// 属性の取得 const attribute = $('セレクタ').attr('属性名');

DOM要素に設定された属性の設定値を取得します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>jQuery CSS</title>
<style>
.attribute {
  background-color: #f0f9ff;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
    const attribute = $('.attribute').attr('name');
    window.alert(attribute);
});
</script>
</head>
<body>
  <div>
    <div class="attribute"
         name="attr-div">
      属性を取得するdiv要素
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery CSS</title>

<style>

.attribute {

background-color: #f0f9ff;

}

</style>

$(document).ready(function() {

const attribute = $('.attribute').attr('name');

window.alert(attribute);

});

</script>

</head>

<body>

<div>

<div class="attribute"

name="attr-div">

属性を取得するdiv要素

</div>

</body>

</html>

ブラウザでの表示

スタイルの設定（指定）

attrメソッドで対象のDOM要素の属性を設定する場合は、attrメソッドの第1パラメーターに属性名を指定し、第2パラメーターに設定する属性の値を指定します。

書式（構文）

// スタイルの設定
$('セレクタ').attr('属性名', '設定値');

1 2	// スタイルの設定 $('セレクタ').attr('属性名', '設定値');

DOM要素に指定した属性の値を設定します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>jQuery CSS</title>
<style>
.attribute {
  background-color: #f0f9ff;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
    $('.attribute').attr('title', 'div要素のタイトル');
    window.alert($('.attribute').attr('title'));
});
</script>
</head>
<body>
  <div>
    <div class="attribute"
         name="attr-div">
      属性を取得するdiv要素
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery CSS</title>

<style>

.attribute {

background-color: #f0f9ff;

}

</style>

$(document).ready(function() {

$('.attribute').attr('title', 'div要素のタイトル');

window.alert($('.attribute').attr('title'));

});

</script>

</head>

<body>

<div>

<div class="attribute"

name="attr-div">

属性を取得するdiv要素

</div>

</body>

</html>

ブラウザでの表示

属性の一括設定（指定）

attrメソッドでは複数の属性を一括して設定することも可能です。
複数の属性を設定する場合は、属性名をキーに持つハッシュ形式のオブジェクトを作成して、属性に設定する値をオブジェクトの値に指定します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>jQuery CSS</title>
<style>
.attribute {
  background-color: #f0f9ff;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
    // ハッシュ形式のオブジェクトで属性を定義
    const attributes = {
      name: 'attr-set-name',
      title: 'attr-set-title',
    };
    $('.attribute').attr(attributes);
    // cssメソッドで複数の属性を設定
    const name = $('.attribute').attr('name');
    const title = $('.attribute').attr('title')
    window.alert(`${name} ${title}`);
});
</script>
</head>
<body>
  <div>
    <div class="attribute">
      属性を取得するdiv要素
    </div>
  </div>s
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery CSS</title>

<style>

.attribute {

background-color: #f0f9ff;

}

</style>

$(document).ready(function() {

// ハッシュ形式のオブジェクトで属性を定義

const attributes = {

name: 'attr-set-name',

title: 'attr-set-title',

};

$('.attribute').attr(attributes);

// cssメソッドで複数の属性を設定

const name = $('.attribute').attr('name');

const title = $('.attribute').attr('title')

window.alert(`${name} ${title}`);

});

</script>

</head>

<body>

<div>

属性を取得するdiv要素

</div>

</div>s

</body>

</html>

上記の例ではattributesというオブジェクトを作成して、名前（name）とタイトル（title）を設定しています。

ブラウザでの表示

属性の削除

jQueryでは属性を削除することもできます。属性を削除するにはremoveAttrメソッドを使います。

書式（構文）

// スタイルの設定
$('セレクタ').removeAttr('属性名');

1 2	// スタイルの設定 $('セレクタ').removeAttr('属性名');

DOM要素に設定されている属性を削除します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280, maximum-scale=1, user-scalable=yes">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>jQuery CSS</title>
<style>
.attribute {
  background-color: #f0f9ff;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
    let title = $('.attribute').attr('title');
    window.alert(title);
    $('.attribute').removeAttr('title');
    title = $('.attribute').attr('title');
    window.alert(title);
});
</script>
</head>
<body>
  <div>
    <div class="attribute"
         name="attr-div"
         title="HTMLで設定したタイトル">
      属性を取得するdiv要素
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery CSS</title>

<style>

.attribute {

background-color: #f0f9ff;

}

</style>

$(document).ready(function() {

let title = $('.attribute').attr('title');

window.alert(title);

$('.attribute').removeAttr('title');

title = $('.attribute').attr('title');

window.alert(title);

});

</script>

</head>

<body>

<div>

<div class="attribute"

name="attr-div"

title="HTMLで設定したタイトル">

属性を取得するdiv要素

</div>

</body>

</html>

ブラウザでの表示