08

JS TOGGLECLASS, JAVASCRIPT CLASS METHOD

JS TOGGLECLASS, JAVASCRIPT CLASS METHOD
Didalam website tentu banyak sekali tag html yang memiliki berbagai atribut baik itu class atau id, dengan tujuan agar mudah di panggil atau juga untuk memudahkan melakukan custom style yang kita terapkan melalui file css.
kemudian bagaimana agar kita bisa merubah class dari elemen html itu pada saat website sudah berjalan atau ingin melakukan perubahan class pada suatu elemen dengan menggunakan javascript.
tentu kita harus membuat scriptnya, yang harus kita pahami adalah class ini di peroleh dari file css yang kita terapkan pada elemen html.
disini saya contohkan dengan membuat div dengan perintah atau style tersembunyi dengan kata lain pada css yaitu hidden.
Contoh sederhana:
contoh perintah css: .hidden{display:none;} lalu akan kita terapkan untuk menyembunyikan gambar contohnya: <div class="gambar hidden"> <img alt="gambar" src="alamat-gambar"> </div> maka gambarpun tidak akan muncul pada halaman kita sebelum kita hilangkan class hidden tersebut.
maka kita membuat perintah javascript untuk menghilangkan class hidden pada div yang memiliki class gambar tersebut. sebelumnya kita perhatikan pada <div class="gambar hidden"> <img alt="gambar" src="alamat-gambar"> </div> disitu terdapat 2 class yaitu gambar dan hidden dengan keadaan tersembunyi karena ada class hidden dengan perintah yang ada di css yaitu .hidden{display:none;} : yang artinya tidak di tampilkan.
untuk menghilangkan class hidden pada class gambar cukup mudah yaitu: <script> $(".gambar").removeClass("hidden"); </script> atau jika ingin menampilkan gamabarnya delay atau di kasih tenggang waktu maka <script> setTimeout(function(){ $(".gambar").removeClass("hidden"); },3000); </script> maka gambar akan muncul setelah 3 detik setelah halaman terbuka. ini juga bisa kita gunakan untuk melakukan lazy load yang kita buat menggunakan css css lazy load cukup mudah dan sederhana semoga bermanfaat.
Ditulis oleh: Admin

Tanggal: 04-08-2022 Pembaruan : 3 bulan lalu

 

Beri nilai


 
BAGIKAN :

Tinggalkan komentar

MENU DESAIGN LAYOUT, MEMBUAT MENU RESPONSIVE DENGAN MUDAH
SEO HTML TAG, HEADING UNTUK SEO SEBUAH WEBSITE
SLIDE UP, CARA MEMBUAT EFEK SHOW DAN HIDE JQUERY
FLOATING ADS, HTML FLOATING ADS MODAL

Galeri