Add Class, Remove Class trong Javascript

Hôm nay ta sẽ học cách thêm 1 class hoặc xoá 1 class của 1 div bằng cách click vào button. Ví dụ ta có div như sau

<div id="result" class="base">Hello Javascript</div>

div này hiện đã có 1 class tên là "base". Class này chỉ chỉnh font đậm lên.

<style>
  .base {
      font-weight: bold;
    }

</style>

Ta sẽ tạo 2 button ,1 button sẽ thêm class, 1 button sẽ xoá class.

<button onclick="addClassFunc()">Add class</button>
<button onclick="removeClassFunc()">Remove Class</button>

Button 1 sẽ gọi hàm addClassFunc() và button 2 sẽ gọi hàm removeClassFun(). Và ta cần tạo 1 class để cho button 1 thêm class này vào khi hàm addClassFunc() được gọi.

<style>
 .bgStyle {
      background: green;
      color: red;
      padding: 10px;
    }
</style>

Để thêm class "bgStyle" vào div ta cần truy cập vào div có id là "result".

var result = document.getElementById('result');

Sau đó ta thêm class vào:

result.classList.add('bgStyle');

hoặc xoá class "bgStyle"

result.classList.remove("bgStyle");

Ta xem code sau:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>JS</title>
  <style>
    .bgStyle {
      background: green;
      color: red;
      padding: 10px;
    }

    .base {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <button onclick="addClassFunc()">Add class</button>
  <button onclick="removeClassFunc()">Remove Class</button>
  <div id="result" class="base">Hello Javascript</div>

  <script>
    function addClassFunc() {
      var result = document.getElementById("result");
      result.classList.add('bgStyle');
    }

    function removeClassFunc() {
      var result = document.getElementById("result");
      result.classList.remove('bgStyle');
    }
  </script>
</body>

</html>

Như vậy ta đã biết cách thêm class và xoá class ra khỏi 1 div rồi. Cũng dễ phải không? ^_^

HTML CSS JAVASCRIPT

SYSTEM

NETWORK

Add Class, Remove Class trong Javascript