Java Script Add Class on Loading

<script>
window.onload = function() {
document.getElementById(&#39;NAMA_ID&#39;).className = &#39;NAMA_CLASS&#39;;
document.getElementById(&#39;NAMA_ID&#39;).className = &#39;NAMA_CLASS&#39;;
};
</script>

Berikut adalah penjelasan dari masing-masing bagian script tersebut:

1. window.onload = function() { ... }

window.onload adalah sebuah event handler yang dipanggil ketika seluruh halaman, termasuk semua elemen seperti gambar, script, dan CSS, telah selesai dimuat. Fungsi anonim yang diberikan (function() { ... }) akan dieksekusi setelah halaman selesai dimuat.

2. document.getElementById('NAMA_ID').className = 'NAMA_CLASS';

document.getElementById('NAMA_ID') adalah metode yang digunakan untuk mendapatkan elemen HTML berdasarkan atribut id-nya. Dalam contoh ini, NAMA_ID adalah ID dari elemen HTML yang ingin diubah. .className adalah properti yang digunakan untuk mendapatkan atau mengubah nilai dari atribut class pada elemen HTML tersebut. = 'NAMA_CLASS'; adalah instruksi untuk menetapkan class baru kepada elemen tersebut. NAMA_CLASS adalah nama class CSS yang akan diterapkan ke elemen.

3. Duplikasi Baris

Script yang Anda berikan memiliki dua baris yang sama persis, yang berarti elemen dengan id yang sama akan diberikan class yang sama dua kali. Namun, ini sebenarnya tidak perlu karena satu baris saja sudah cukup untuk menetapkan class tersebut.

Fungsi Utama Script

Secara keseluruhan, script ini digunakan untuk menambahkan atau mengubah class CSS dari elemen tertentu pada halaman web setelah halaman tersebut selesai dimuat. Class yang ditetapkan akan mempengaruhi tampilan atau perilaku elemen tersebut sesuai dengan definisi CSS dari class tersebut.