tRikSonic
Tema

Toggle Class Pure JavaScript - Tutorial JavaScript

Terakhir diperbarui : 22 Mei 2018 - 04.25
Triksonic - Tutorial kali ini adalah tutorial ringan dengan tema bahasan Toggle ClassName.
Walaupun tutorial sejenis sudah banyak yang membahas, tidak salahnya juga, jika saya membahasnya lagi diblog ini, hitung hitung menambah perbendaharaan pengetahuan tentang javascript.
JavaScript Images

JavaScript

function toggleClass(selectorID,newClass){
  var selector = document.getElementById(selectorID);
  //metode classList
  if(selector.classList)
    selector.classList.toggle(newClass);
  else{
    //jika tidak support classList
    var splitClass = selector.className.split(" "),
        i = splitClass.indexOf(newClass);i>=0?splitClass.splice(i,1):splitClass.push(newClass),
          selector.className=splitClass.join(" ")
  }
}

HTML Example

<button onclick='toggleClass("demo","red");'>Toggle Class</button>

<div class='boxs' id='demo'></div>

Penjelasan :

  • Yang bergaris bawah dengan kata demo adalah target ID dari element yang ditargetkan.
  • Yang bergaris bawah dengan kata red adalah nama kelas (className) yang ingin disematkan.

Demo :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Triksonic Demo</title>
<style>
.boxs {
  width : 100px;
  height : 100px;
  border : 1px solid silver;
}
.red {
  background : red;
}
</style>
</head>
<body>
  
<button onclick="toggleClass('demo','red');">
  Toogle Class
</button>
  
<div class="boxs" id="demo"></div>

<script>
function toggleClass(selectorID,newClass){
  var selector = document.getElementById(selectorID);
  //metode classList
  if(selector.classList)
    selector.classList.toggle(newClass);
  else{
    //jika tidak support classList
    var splitClass = selector.className.split(" "),
        i = splitClass.indexOf(newClass);i>=0?splitClass.splice(i,1):splitClass.push(newClass),
          selector.className=splitClass.join(" ")
  }
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Triksonic Demo</title>
<style>
.boxs {
  width : 100px;
  height : 100px;
  border : 1px solid silver;
}
.red {
  background : red;
}
</style>
</head>
<body>
  
<button onclick="toggleClass('demo','red');">
  Toogle Class
</button>
  
<div class="boxs" id="demo"></div>

<script>
function toggleClass(selectorID,newClass){
  var selector = document.getElementById(selectorID);
  //metode classList
  if(selector.classList)
    selector.classList.toggle(newClass);
  else{
    //jika tidak support classList
    var splitClass = selector.className.split(" "),
        i = splitClass.indexOf(newClass);i>=0?splitClass.splice(i,1):splitClass.push(newClass),
          selector.className=splitClass.join(" ")
  }
}
</script>
</body>
</html>
Selamat berkreasi dan semoga bisa dikembangkan lagi.

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.