ITコラム

プログラミングノウハウ

2018.08.23

#jQuery入門

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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. attr メソッド
2. attr で属性を変更
3. removeAttr で属性を削除
4. まとめ

1. 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：変更前の属性値

▲目次へ戻る

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 )

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>

▲目次へ戻る