Cara Menambahkan Class Pada Sebuah Elemen

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 23, 2021

Di bawah ini kita akan mempelajari cara menambahkan nama kelas ke elemen dengan JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
  width: 100%;
  padding: 25px;
  background-color: blue;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Klik tombol di bawah ini untuk menambahkan kelas "mystyle" ke elemen DIV:</p>

<button onclick="myFunction()">Coba DIV Di sini</button>

<div id="myDIV">
Contoh Elemen DIV.
</div>

<script>
function myFunction() {
   var element = document.getElementById("myDIV");
   element.classList.add("mystyle");
}
</script>

</body>
</html>

Tambahkan Class

Langkah 1) Tambahkan HTML:
Tambahkan nama kelas ke elemen div dengan id = “myDIV” (dalam contoh ini kita menggunakan tombol untuk menambahkan kelas).
Contoh

<button onclick="myFunction()">Coba DIV Di sini</button>

<div id="myDIV">
Contoh Elemen DIV.
</div>

Langkah 2) Tambahkan CSS:
Style pada nama kelas yang ditentukan:
Contoh

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: blue;
  color: white;
  font-size: 25px;
}

Langkah 3) Tambahkan JavaScript:
Dapatkan elemen <div> dengan id = “myDIV” dan tambahkan kelas “mystyle” ke dalamnya:
Contoh

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.add("mystyle");
}

Solusi lintas browser

Catatan: Properti classList tidak didukung di Internet Explorer 9. Kode berikut akan berfungsi di semua browser:
Contoh

function myFunction() {
  var element, name, arr;
  element = document.getElementById("myDIV");
  name = "mystyle";
  arr = element.className.split(" ");
  if (arr.indexOf(name) == -1) {
    element.className += " " + name;
  }
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mystyle {
  width: 100%;
  padding: 25px;
  background-color: red;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Click the "Try it" button to add the "mystyle" class to the DIV element:</p>

<button onclick="myFunction()">Coba Tekan</button>

<div id="myDIV">Contoh div elemen.</div>

<script>
function myFunction() {
  var element, name, arr;
  element = document.getElementById("myDIV");
  name = "mystyle";
  arr = element.className.split(" ");
  if (arr.indexOf(name) == -1) {
    element.className += " " + name;
  }
}
</script>

</body>
</html>