jQuery 「attr」要素に対してアトリビュート値を設定する

DOM要素の指定したアトリビュートに対して、値をセットします。複数のアトリビュート値を一括して設定したい場合は、引数として「{要素名：値,要素名：値…}」の形式の配列を渡せます。jQuery1.1以降、クロージャからの戻り値によって、値を動的に設定することも可能です。

書式

.attr(アトリビュート名,値);
.attr(配列);
.attr(function(){処理…});

$('#photo').attr('alt','photo');
$('#photo').attr({
 alt: 'photo',
 title: '写真'
});
$('form input:text').attr('value',function(){
  return $(this).attr('name');
});

サンプル

１、すべてのimg要素のtitleアトリビュートとaltアトリビュートに、srcアトリビュートに指定された画像のファイル名を設定する。

<body>
  <style>
    .sticky {
      background: #aaa;
    }
  </style>
    <div class="main">
      <div class="header">
        <h1>サンプル</h1>
      </div>
      <div class="content">
        <div class="sticky">
          <p>コロッケ定食</p>
          <fingure><img src="./images/112083_s.jpg" width="200px" height="100px"></fingure>
        </div>
        <div class="sticky">
          <p>オムライス</p>
          <fingure><img src="./images/2227584_s.jpg" width="200px" height="100px"></fingure>
        </div>
        <div class="sticky">
          <p>ホットドッグ</p>
          <fingure><img src="./images/1418030_s.jpg" width="200px" height="100px"></fingure>
        </div>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2024 xxx all rights reserved.</p>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        var title;
        $('img').each(function(){
          title = $(this).attr('src');
          $(this).attr('alt',title);
          $(this).attr('title',title);
        });
      });
    </script>
</body>

２、フォームのすべてのinput type=”text”要素のplaceholderアトリビュートに、それぞれのnameアトリビュートの値を設定する

<body>
  <style>
    .sticky {
      background: #aaa;
    }
  </style>
    <div class="main">
      <div class="header">
        <h1>サンプル</h1>
      </div>
      <div class="content">
        <form>
          姓<br><input class="form-input" type="text" name="lastname"><br>
          名<br><input class="form-input" type="text" name="firstname"><br>
          メールアドレス<br><input class="form-input" type="text" name="email"><br>
          電話番号<br><input class="form-input" type="text" name="phone"><br>
          <input class="button" type="submit" name="submit" value="送信">
        </form>
        <div class="desc"></div>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2024 xxx all rights reserved.</p>
      </div>
    </div>
    <script>
      $(document).ready(function(){
       $('form input:text').attr('placeholder', function(){
        return $(this).attr('name');
       });
      });
    </script>
</body>

カテゴリー:DOM操作JavaScriptjQuery