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

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

目次

１．attr メソッド
２．attr で属性を変更
３．removeAttr で属性を削除

１．attr メソッド

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

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

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

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

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

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

.attr( name )

name
属性の名前を指定

.attr( name, value )

name
属性の名前を指定
value
設定する値を指定

.attr( map )

map
属性の名前と値との Map 値を指定 （まとめて要素の属性を設定することが可能となる）

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

name
属性の名前を指定
function(index, attr)
新しい属性値を戻り値として返す関数を指定 　index：要素の index 　attr：変更前の属性値

▲目次へ戻る

　

２．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"
});

▲目次へ戻る

　

３．removeAttr で属性を削除

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

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

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

.removeAttr( name )

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>

▲目次へ戻る