Ditulis oleh: Ditulis pada: 5/08/2019
Menambah Dan Menghapus Class Pada Body Atau HTML Tag Dengan Javascript - Ketika kita membuat sebuah halaman web, terkadang kita memerlukan sebuah situasi untuk melakukan sebuah tindakan. Maka kita memerlukan sebuah selektor untuk memudahkan kita memberikan tindakan yang diinginkan. Dan kali ini kita akan menambahkan class pada body tag atau HTML tag dengan Javascript.
body tag adalah tag terluar dari sebuah struktur HTML sebuah halaman web, dan HTML tag adalah tag terluar dari sebuah halaman web. Untuk itu, menambahkan class pada body maupun html dapat mempermudah melakukan tindakan pada elemen-elemen yang ada di dalamnya.
Menambahkan class pada body maupun html tag lazimnya dapat dilakukan dengan 2 situasi, yaitu dengan onscroll dan onclick event. Masing-masing digunakan sesuai situasi yang diinginkan.
Menambahkan class pada body maupun html tag dengan onscroll dapat berguna misalnya untuk membuat sticky header, show hide tombol scroll to top, atau show hide elemen lain berdasarkan scroll halaman.
Menambahkan class pada body maupun html tag dengan onclick dapat berguna misalnya untuk menyembunyikan atau menampilkan sebuah elemen dengan mengklik sebuah tombol, atau juga bisa untuk membuat dark mode halaman, atau lainnya sesuai kreasi Anda.
Untuk mengenali body tag dengan Javascript dapat menggunakan document.body dan untuk html tag dapat menggunakan document.documentElement
Add Remove Class on body or html Tag Onscroll
Untuk menambahkan class pada body maupun html tag dengan onscroll dapat menggunakan Javascript berikut. Ini adalah plain Javascript jadi tidak memerlukan Jquery Library.
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop != 0 || document.documentElement.scrollTop != 0) {
var element, name, arr;
element = document.body;
name = "flow";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
} else {
var element = document.body;
element.className = element.className.replace(" flow","")
}
}Jika Anda ingin berdasarkan jarak scroll dari tepi atas, ganti kode != 0 dengan > 200. Angka 200 silahkan ganti sesuaikan dengan keinginan Anda.
Kode nama class flow silahkan sesuaikan dengan keinginan Anda.
Javascript di atas akan menambakan class pada body tag ketika discroll ke bawah, jika ingin menambahkan class pada html tag silahkan ganti document.body yang ditandai dengan document.documentElement
Dan ketika halaman discroll ke atas dan kembali ke posisi semula, maka class yang ditambahkan tadi akan otomatis dihapus.
Add Remove Class on body or html Tag Onclick
Untuk menambahkan class pada body maupun html tag dengan onclick dapat menggunakan Javascript berikut. Ini adalah plain Javascript jadi tidak memerlukan Jquery Library.
function onclickAddclass() {
var element, name, arr;
element = document.body;
name = "flow";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
}
function onclickRemoveclass() {
var element = document.body;
element.className = element.className.replace(" flow","")
}Kode nama class flow silahkan sesuaikan dengan keinginan Anda.
Javascript di atas akan menambakan class pada body tag, jika ingin menambahkan class pada html tag silahkan ganti document.body yang ditandai dengan document.documentElement
Selanjutnya buat tombol untuk Add Remove class seperti berikut:
<div aria-label="Add Class" onClick="onclickAddclass()" role="button" tabindex="0">Add class to body</div>
<div aria-label="Remove Class" onClick="onclickRemoveclass()" role="button" tabindex="0">Remove class from body</div>Melakukan Tindakan Setelah Menambahkan Class
Setelah class ditambahkan pada body atau html tag, maka selanjutnya kita bisa melakukan tindakan pada elemen yang dimaksud dengan CSS Style.
Sebagai contoh show hide tombol scroll to top onscroll sebagai berikut:
.scrolltotop {
display: none;
}
.flow .scrolltotop {
display: block;
}Sebagai contoh lain misalnya menghilangkan sidebar dengan onclick sebagai berikut:
.sidebar {
display: block;
}
.flow .sidebar {
display: none;
}Class .flow adalah class yang ditambahkan pada body maupun html tag. Style di atas berlaku untuk onscroll dan onclick.
Selamat mencoba dan selamat berkreasi.