.net column
.NET開発者のためのブログメディア

jQueryのattrメソッドで属性を操作。設定や削除の方法とは

 
jQueryのattrメソッドで属性を操作。設定や削除の方法とは
基本情報技術者試験の試験対策はこちら>>

jQueryには、HTML要素の属性の値を操作することができる「attrメソッド」があります。ここでは、attrメソッドの使い方や、実際に値を取得する方法を分かりやすく紹介していきます。ぜひ、参考にしてみてください。

SE
jQuery側でHTML要素を操作したいときに便利ですね。
PL
コードも一行で書けるので、すぐに覚えられますよ!

実行環境
・macOS 10.15.6
・Repl.it

attrメソッドとは?

attrメソッドを使うと、HTML要素の属性を簡単に設定・取得・変更することが可能です。以下の例では「class」が属性であるため、「test」という値を操作できます。

attrメソッドによる属性の取得

まずは、atrrメソッドを使って属性を取得してみましょう。取得はとても簡単で、コードは一行で書くことができます。

セレクタを指定し、その後ろにattrメソッドをつなげて「id」か「class」かを指定します。基本構文に当てはめると、以下のようになります。

これで、「test」という値を取得することができます。

実行結果
値の取得結果

attrメソッドによる属性の設定

次に、属性を新規で設定してみましょう。

例えば、クラス属性に「test」という文字列を設定したい場合は、以下のようになります。

では、一つのセレクタに複数の属性を設定したい場合はどうすれば良いのでしょうか?
この場合は、{ } 内に「追加したい属性」と「属性に設定したい値」を順に記載していきます。

例えば、HTMLのinput要素にclass属性とtype属性を設定したい場合は、次のようになります。

removeAttrメソッドによる属性の削除

最後に、設定した属性を削除してみましょう。
属性を削除するためには、jQueryの「removeAttrメソッド」を使用します。

input要素のtype属性を削除したい場合、以下のように記述することでtype属性を削除することができます。

SE
attrメソッド、属性の操作ができてとても便利ですね!
PL
そうですね。属性の削除だけ「removeAttrメソッド」を使うことに注意してくださいね。

attrメソッドでHTML要素を自由自在に操作しよう

今回は、attrメソッドを使って属性の値を取得・設定・削除しました。Webサイトやアプリケーションを作成する際、条件に合わせてHTML要素を動的に操作することはよくあるでしょう。jQueryのattrメソッドを活用すれば、HTML要素を自由自在に扱うことができますので、ぜひ活用してみてください。

>>>エンジニアの案件を探すならFEnet .NET Navi


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags