jQuery【 attr 】属性に値を設定する attr と 削除する removeAttr

jQuery の attr メソッドを使用すると、要素の属性に対して 値を設定したり変更したりすることができます。
今回は、jQuery の attr メソッドの使い方を解説いたします。

1. attr メソッド

　
attr メソッドは、引数によって 4 通りの記述方法があります。

$(セレクタ).attr( name );

$(セレクタ).attr( name, value );

$(セレクタ).attr( map );

$(セレクタ).attr( name, function(index, attr) );

attr メソッドの引数の内容は、それぞれ以下の通りです。

.attr( name )

.attr( name, value )

.attr( map )

.attr( name, function(index, attr) ) 

▲目次へ戻る

2. attr で属性を変更

　
attr メソッドを使用して、ボタンの属性（色とテキスト）を変更します。
各ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn1").on("click", function() {
    $("#btn1").attr("value","オン");
    $("#btn1").attr("style","background-color:red");
    $("#btn2").attr("value","オフ");
    $("#btn2").attr("style","background-color:#F0F0F0");
  });

  $("#btn2").click(function() {
    $("#btn1").attr({
      value:"オフ",
      style:"background-color:#F0F0F0"
    });
    $("#btn2").attr({
      value:"オン",
      style:"background-color:red"
    });
  });
});
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
  <input type="button" id="btn1" value="オフ">　<input type="button" id="btn2" value="オフ">
</div>

　
左のボタン（ #btn1 ）をクリックした際の属性変更は「 .attr( name, value ) 」の形で次のように記述しています。

$("#btn1").attr("value","オン");
$("#btn1").attr("style","background-color:red");

　
同様の処理をしていますが、右のボタン（ #btn2 ）をクリックした際の属性変更は「 .attr( map ) 」の形で次のように記述しています。

$("#btn1").attr({
  value:"オフ",
  style:"background-color:#F0F0F0"
});

▲目次へ戻る

3. removeAttr で属性を削除

　
属性自体を削除する場合は、removeAttr メソッドを使用します。
removeAttr メソッドは、次のように記述します。

$(セレクタ).removeAttr( name );

removeAttr メソッドの引数の内容は次の通りです。

.removeAttr( name )

　　
removeAttr メソッドを使用して、テキストボックスの属性であるプレースホルダー（入力のヒントとなるテキスト）を削除します。
削除ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn3").on("click", function() {
    $("#txt").removeAttr("placeholder");
  });
});
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
  <div style="display:inline-flex; align-items:center;">
    <input type="button" id="btn3" value="削除">　
    <input type="text" id="txt" placeholder="ここが削除されます。">
  </div>
</div>

▲目次へ戻る

4. まとめ

jQueryのattr メソッドについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る