MENU
  1. ホーム
  2. JS
  3. jQuery
  4. 要素の属性を取得・削除

要素の属性を取得・削除

jQuery
2024.05.17

attr・removeattrメソッドは、HTML要素の属性を取得・設定・削除に使用されます。

attr : HTML要素の属性を取得または設定
removeattr : HTML要素の指定された属性を削除

attr
記法

【取得】
$(selector).removeAttr(attributeName);
【設定】
$(selector).attr(attributeName, value);
【削除】
$(selector).removeAttr(attributeName);
==========================

selector : 対象の要素を指定するセレクター
attributeName : 操作したいHTML要素の属性の名前
value : 属性に設定する値

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery attrとremoveAttrについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="profile" data-user-id="12345" data-role="admin">
      <p id="user_name" class="editable">ユーザー名: John Doe</p>
      <p id="user_role" class="editable">役割: 管理者</p>
      <button id="edit_profile">プロフィール編集</button>
      <button id="view_profile">プロフィール表示</button>
    </div>

    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
$(function () {
  // プロフィールを編集モードにする
  $("#edit_profile").on("click", function () {
    var userId = $("#profile").attr("data-user-id");
    var userRole = $("#profile").attr("data-role");

    // 編集モードに変更
    $(".editable")
      .attr("contenteditable", "true")
      .css("border", "1px solid #ccc")
      .focus();

    // ログ用
    console.log(
      "編集モードに切り替えました。ユーザーID:",
      userId,
      "役割:",
      userRole
    );
  });

  // プロフィールを表示モードにする
  $("#view_profile").on("click", function () {
    // 表示モードに変更
    $(".editable").removeAttr("contenteditable").css("border", "none");

    // ログ用
    console.log("表示モードに切り替えました。");
  });
});

/* プロフィールスタイル */
#profile {
  border: 1px solid #ccc;
  padding: 10px;
  width: 50%;
}

#profile p {
  margin: 10px 0;
}

button {
  margin: 5px;
}

/* 編集可能な要素に対するスタイル */
.editable[contenteditable="true"] {
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}
出力結果

ユーザー名: John Doe

役割: 管理者

jQuery