Toggle Class Pure Javascript - Tutorial Javascript

Toggle Class Pure Javascript - Tutorial Javascript - Kembali lagi di blog Cara2xMudah, Pada kesempatan kali ini admin akan membagikan artikel tentang Toggle Class Pure Javascript - Tutorial Javascript, dan admin telah menyiaplkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan pada Artikel Javascript, yang kami tulis ini dapat dengan mudah anda pahami. baiklah, tidak usah berlama-lama selamat membaca.

Judul : Toggle Class Pure Javascript - Tutorial Javascript
link : Toggle Class Pure Javascript - Tutorial Javascript

Baca juga


Toggle Class Pure Javascript - Tutorial Javascript

Triksonic - Tutorial kali ini yaitu tutorial ringan dengan tema bahasan Toggle ClassName.
Walaupun tutorial sejenis sudah banyak yang membahas, tidak salahnya juga, jikalau aku membahasnya lagi diblog ini, hitung hitung menambah perbendaharaan pengetahuan perihal javascript.
Tutorial kali ini yaitu tutorial ringan dengan tema bahasan Toggle ClassName Toggle Class Pure JavaScript - Tutorial JavaScript

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 yaitu sasaran ID dari element yang ditargetkan.
  • Yang bergaris bawah dengan kata red yaitu 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 agar dapat dikembangkan lagi.


Demikianlah artikel kali ini tentang Toggle Class Pure Javascript - Tutorial Javascript

dengan adanya artikel Toggle Class Pure Javascript - Tutorial Javascript yang admin bagikan kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan atau artikel menarik lainnya dan terimaksih telah berkunjung.

Anda sekarang membaca artikel Toggle Class Pure Javascript - Tutorial Javascript dengan alamat link https://cara2xmudah.blogspot.com/2016/02/toggle-class-pure-javascript-tutorial.html