クラス属性を操作する - Javascript

  • 作成日：
  • 最終更新日：2025/06/25

リストのクラスをまとめて削除する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="box">
    <ul id="list-box">
      <li id="list-1" class="list-item">List1</li>
      <li id="list-2" class="list-item">List2</li>
      <li id="list-3" class="list-item">List3</li>
      <li id="list-4" class="list-item">List4</li>
    </ul>
  </div>
  
</body>
</html>

script.js

window.addEventListener('load', function(){
  const element = Array.from(document.querySelectorAll(".list-item"));
  element.forEach(function(e){
    e.classList.remove("list-item");
  });
});

クラス属性を削除する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="box">
    <ul id="list-box">
      <li id="list-1" class="list-item">List1</li>
      <li id="list-2" class="list-item">List2</li>
      <li id="list-3" class="list-item">List3</li>
      <li id="list-4" class="list-item">List4</li>
    </ul>
  </div>
  
</body>
</html>

script.js

window.addEventListener('load', function(){
  const element = Array.from(document.querySelectorAll(".list-item"));

  element.forEach(function(e){
    e.removeAttribute('class');
  });
});

class属性を空にする

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="box">
    <ul id="list-box">
      <li id="list-1" class="list-item">List1</li>
      <li id="list-2" class="list-item">List2</li>
      <li id="list-3" class="list-item">List3</li>
      <li id="list-4" class="list-item">List4</li>
    </ul>
  </div>
  
</body>
</html>

script.js

window.addEventListener('load', function(){
  const element = Array.from(document.querySelectorAll(".list-item"));

  element.forEach(function(e){
    e.setAttribute('class', '');
  });
});

1つの要素に複数設定されたクラス名をまとめて削除する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="box">
    <ul id="list-box">
      <li id="list-1" class="list-item1 list-item2">List1</li>
    </ul>
  </div>
  
</body>
</html>

script.js

window.addEventListener('load', function(){
  const element = document.querySelector("#list-1");

  let classArr = ["list-item1", "list-item2"];
  element.classList.remove(...classArr);
});

複数の要素にクラスをまとめて設定する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="box">
    <ul id="list-box">
      <li id="list-1" class="list-item">List1</li>
      <li id="list-2" class="list-item">List2</li>
      <li id="list-3" class="list-item">List3</li>
      <li id="list-4" class="list-item">List4</li>
    </ul>
  </div>
  
</body>
</html>

script.js

window.addEventListener('load', function(){
  const element = Array.from(document.querySelectorAll(".list-item"));

  element.forEach(function(e){
    e.classList.add("after-list-item");
  });
});

1つの要素に複数のクラスを設定する

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="box">
    <ul id="list-box">
      <li id="list-1" class="list-item">List1</li>
    </ul>
  </div>
  
</body>
</html>

script.js

window.addEventListener('load', function(){
  const element = document.querySelector("#list-1");

  element.classList.add("first", "second", "third");
});

スプレッド構文

window.addEventListener('load', function(){
  const element = document.querySelector("#list-1");
  let classArr = ["first", "second", "third"];

  element.classList.add(...classArr);
});

複数の要素に複数のクラス名を設定する

4つのli要素すべてに「 first, second, third 」のクラス名を設定します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="box">
    <ul id="list-box">
      <li id="list-1" class="list-item">List1</li>
      <li id="list-2" class="list-item">List2</li>
      <li id="list-3" class="list-item">List3</li>
      <li id="list-4" class="list-item">List4</li>
    </ul>
  </div>
  
</body>
</html>

script.js

window.addEventListener('load', function(){
  const element = Array.from(document.querySelectorAll(".list-item"));
  let classArr = ["first", "second", "third"];

  element.forEach(function(e){
    e.classList.add(...classArr);
  });
});