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

colmun_main11562

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

目次

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

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>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です