【jQuery】要素に指定したclass名などの属性の値を取得する方法

村上 著者:村上

【jQuery】要素に指定したclass名などの属性の値を取得する方法

HTML要素に指定された class 名や id 名などを取得する方法です。
私は今回、class名を取得するのに使いました。

 

使用するメソッドは「attr()」です。
サンプルコードはこちら。

// div要素のclass名を取得
var className = $("div").attr("class");

<div class="sample">DIV要素です</div>

上記を実行すると、変数 className には div要素のクラス名である「sample」が代入されます。

属性の取得についてはこんな感じです。
とても簡単でした!

 

また attr メソッドは、属性を取得するだけではなく、追加することもできます。
サンプルコードはこちら。

// div要素のid名にsampleと指定
$("div").attr("id", "sample");

<div>DIV要素です</div>

こちらを実行すると、div要素に id=”sample” が追加されます。

classの追加なら .addClass() メソッドもありますが、こちらの attr() メソッドは、属性名と値を指定できるので、class以外にも、id、href、type、value なんかも追加できます。
また、下記のように属性を一度に複数追加することもできるので、コードがすっきりして分かりやすいです。

$("div").attr({id : "sample",
               class : "text"});

 

追加があるなら削除もできる、ということで、属性の削除には removeAttr() メソッドを使います。

// div要素のclass名を削除
$("div").removeAttr("class");

<div class="sample">DIV要素です</div>

上記を実行すると、class属性が削除されます。

このあたりはセットで覚えておくと良さそうですね。

 

ということて、要素に指定された属性の値を取得する方法でした!
class名に○○が指定された要素を取得、というのは使用したことがあるのですが、divに設定されたクラス名自体を取得する、というのはやったことがなかったので、今回調べてまとめてみました。
似たような箇所で悩んでいる方は、是非ご参考にしてください。

  • この記事いいね! (0)

著者について

村上

村上 administrator

1件のコメント

【jQuery】要素直下の子要素を取得する方法 | 株式会社シーポイントラボ | 浜松のシステム開発会社投稿日:7:00 pm - 3月 15, 2018

[…] 【jQuery】要素に指定したclass名などの属性の値を取得する方法 […]

コメントは停止中です。