ZeroPlus Media > Web制作 > JavaScript > 【jQuery】attrメソッドでCSSの属性を自由に操作しよう！

【jQuery】attrメソッドでCSSの属性を自由に操作しよう！

JavaScript

2022/03/18

2023/05/06

CSSの属性値をjQueryで自由に制御して、思った通りの動きを実現したい。

そんなときに使えるのがjQueryのattrメソッドです。attrメソッドを使用すれば、HTML要素の属性を追加・削除・取得・変更ができるようになります。

記事の前半ではattrメソッドの基礎知識について解説します。

記事の後半ではattrメソッドを使った簡単なプログラムも解説しております。ぜひ最後までチェックしてみてくださいね。

この記事で身につく内容

jQueryのattrメソッドの基礎知識

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

jQueryのattrメソッドとは
attrメソッドを使って色を変更してみよう
まとめ

jQueryのattrメソッドとは

attrとはattribute（属性：アトリビュート）の略称です。attrメソッドは、class属性やid属性など「属性」を追加・削除・取得・変更することができるメソッドです。

基本書式は下記のようになります。

attrメソッドの基本書式

$("セレクタ").attr("属性名");

属性名は、classやid、valueなどが当たります。

attrメソッドで属性値取得

attrメソッドで属性を取得する場合は次のようになります。

  <p class="test">属性を指定していないpタグです</p>

const class_text = $('p').attr('class');
console.log(class_text);

出力結果

class属性の属性値を取得したいためattr()の中に属性名を記述しました。その結果、コンソール画面で属性値であるtestを取得することができました。

なお、pタグに属性を指定していない場合でattrメソッドを使用すると、undefined（定義されていない）となります。

attrメソッドで属性追加

属性をテキスト追加する場合は次のようになります。

<p>class属性を指定したpタグです</p>

const class_text = $('p').attr('class', 'new'); // attr('属性名', '指定したい属性値');

出力結果

元のpタグにはclass属性が適用されていませんでしたが、attrメソッドによって「class属性」と「属性値：new」を追加することができました。

複数の属性値を追加する場合は次のようになります。

const NewClass_text = $('p').attr('class', 'new new2'); // attr('属性名', '属性値1 属性値2 属性3...');

出力結果

removeAttrメソッドで属性削除

属性を削除する場合は次のようになります。

<p class="remove">class属性を指定したpタグです</p>

const RemoveClass_text = $('p').removeAttr('class');　//removeAttr('削除したい属性名');

出力結果

pタグに適用したclass属性を削除することができました。

複数の属性を指定する方法

複数の属性をまとめて指定する場合は下記のようになります。

<p>複数の属性を指定したpタグです</p>

const type = $('p').attr({
  class: 'test',
  id: 'id2',
  value: 'val',
  checked: 'true',
  name: 'name'
});

出力結果

複数の属性を指定することができました。

attrメソッドを使って色を変更してみよう

attrメソッドを使ってボタンをクリックしたら下記HTMLのpタグの文字色を変更してみます。

  <p>ボタンを押したら色が変わります。</p>
  <button id="js-red">赤</button>
  <button id="js-blue">青</button>
  <button id="js-green">緑</button>
  <button id="js-init">元に戻す</button>

.color-red {
  color: red;
}

.color-blue {
  color: blue;
}

.color-green {
  color: green;
}

const colorRed = $('#js-red');
const colorBlue = $('#js-blue');
const colorGreen = $('#js-green');
const colorInit = $('#js-init');
const text = $('p');

colorRed.on('click', function () {
  text.attr('class', 'color-red');
});

colorBlue.on('click', function () {
  text.attr('class', 'color-blue');
});

colorGreen.on('click', function () {
  text.attr('class', 'color-green');
});

colorInit.on('click', function () {
  text.removeAttr('class');
});

出力結果

See the Pen attrメソッド by ZeroPlus (@zeroplus-programming) on CodePen.

上記コードの仕組みとしては、まずHTMLのbuttonタグをクリックしたときの挙動をjQueryで動きを制御するため、idを付与します。

「buttonをクリックしたらpタグにclass属性が追加される」ようにjQueryで制御します。

「クリックしたときclass属性が追加されたら文字色を変更したい」ので、CSSにはcolor-redクラス、color-blueクラス、color-greenクラスをそれぞれ適用しています。

jQueryでは下記の要素をそれぞれ取得して変数に格納します。

const colorRed = $('#js-red');
const colorBlue = $('#js-blue');
const colorGreen = $('#js-green');
const colorInit = $('#js-init');
const text = $('p');

そして下記のようにbuttonタグがクリックされたら、attrメソッドでclass属性が追加されるように記述します。

colorRed.on('click', function () { //「赤」のbuttonタグをクリックしたら
  text.attr('class', 'color-red'); // pタグにclass属性のcolor-red属性値を付与する
});

colorBlue.on('click', function () { //「青」のbuttonタグをクリックしたら
  text.attr('class', 'color-blue'); // pタグにclass属性のcolor-blue属性値を付与する
});

colorGreen.on('click', function () { //「緑」のbuttonタグをクリックしたら
  text.attr('class', 'color-green'); // pタグにclass属性のcolor-green属性値を付与する
});

colorInit.on('click', function () { //「元に戻す」のbuttonタグをクリックしたら
  text.removeAttr('class'); // pタグのclass属性を削除する
});

それぞれのボタンをクリックすれば、前のclass属性が上書きされてクリックしたボタンのclass属性が追加されます。元の文字色にする場合はinitボタンをクリックします。その結果pタグのclass属性を削除され、動きを実現しています。