Cara Mengganti Nama Kelas menggunakan jQuery
Hallo rekan rekan Dumenity berjumpa lagi pada panduan kursuswebsite, di panduan kali ini kita akan belajar mengenai Cara Mengganti Nama Kelas menggunakan jQuery. Pada posting ini, kita akan mengganti kelas CSS menggunakan jQuery. Contoh ini tentu amat dinamis jadi kita tak perlu mengubah pengaturan CSS yang terdapat pada file CSS akan lebih mempermudah kita pada bekerja. Saya mempunyai contoh yang menunjukkan ikon gambar yang lebih kecil di pemuatan halaman. Dan kemudian ketika saya klik akan mengubah ukurannya menggunakan jQuery.
Wujud HTML ini menunjukkan ikon gambar yang lebih kecil dengan nama kelas small-icon.
Silahkan Sahabat 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 di ketika event klik tombol. manfaat jQuery switchClass digunakan bagi 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 bagi 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 ;
Bagi lebih jelasnya silahkan Sahabat coba sendiri. Oke demikianlah tadi pembahasan saya mengenai Cara Mengganti Nama Kelas menggunakan jQuery, semoga bermanfaat.
Sumber https://kursuswebsite.org
