jQuery - 属性の設定・取得・削除

公開日:2018-12-10

1. 概要

指定した要素の属性の設定と取得と削除を行います。

属性の設定
ソース
$(セレクタ).attr(属性名, 値);
$(セレクタ).attr({連想配列});

属性の取得
ソース
var attr = $(セレクタ).attr(属性名);

属性の削除
ソース
$(セレクタ).removeAttr(属性名);

2. サンプル

ソース
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <!-- 画面 -->
  <div id="fruits">
    <div id="apple">apple</div>
    <div id="orange">orange</div>
    <div id="banana" hidden="hidden">banana</div>
  </div>
  
  <!-- Script -->
  <script>
    $(function(){
      //設定 orangeを消す
      $("#orange").attr("hidden", "hidden");

      //削除 bananaを表示させる
      $("#banana").removeAttr("hidden");

      //取得
      console.log( $("#orange").attr("hidden") );
    });
  </script>

</body></html>

実行結果:コンソール
hidden

実行結果:画面