Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebsite, pada tutorial kali ini kita akan belajar tentang Cara Mengganti Nama Kelas menggunakan jQuery. Dalam posting ini, kita akan mengganti kelas CSS menggunakan jQuery. Contoh ini tentu sangat dinamis jadi kita tidak perlu mengubah pengaturan CSS yang ada dalam file CSS akan lebih memudahkan kita dalam bekerja.  Saya memiliki contoh yang menunjukkan ikon gambar yang lebih kecil pada pemuatan halaman. Dan kemudian ketika saya klik akan  mengubah ukurannya menggunakan jQuery.

Bentuk HTML ini menunjukkan ikon gambar yang lebih kecil dengan nama kelas small-icon.

Silahkan Anda tulis code HTML berikut

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cara Mengganti Nama Kelas menggunakan jQuery</title>
</head>
<body>
	<div class="image-content">
	<button id="switch">Switch Class</button> 
	<div  class="small-icon">
	  <img src="image.png" width="100%" />
	</div> 
</div>
</body>
</html>

Atribut kelas ini diubah pada saat event klik tombol. fungsi jQuery switchClass digunakan untuk mengubah atribut class. Berikut scriptnya ,

<script>
  $(document).ready(function() {
    $("#switch").click(function(){
      $(".small-icon").switchClass("small-icon", "large-icon", 500);
      $(".large-icon").switchClass("large-icon", "extra-large-icon", 500);
	  $(".extra-large-icon").switchClass("extra-large-icon", "small-icon", 500);
    });
  });
</script>
 

Dengan mengganti nama kelas, ukuran ikon diubah dari yang lebih kecil menjadi lebih besar dan lebih jauh ke ukuran ekstra-large. CSS untuk code HTML di atas,

<style>
  .image-content{width: 200px;border: #D2CCCC 1px solid;padding: 5px 40px;height: 280px;border-radius: 4px;box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);}
	#switch {padding: 10px 20px;margin: 15px 0px;border-radius: 4px;border: 0;background: #7A7B7B;color: #FFF;}
  .small-icon{width:50px;}
  .large-icon{width:100px;}
  .extra-large-icon{width:200px;}
</style>

berikut contoh screenshot dari HTML di atas ;

Cara Mengganti Nama Kelas menggunakan jQuery

Untuk lebih jelasnya silahkan Anda coba sendiri. Oke itulah tadi pembahasan saya tentang Cara Mengganti Nama Kelas menggunakan jQuery, semoga bermanfaat.