JavaScript HTML DOM - Mengubah CSS

HTML DOM memungkinkan JavaScript untuk mengubah gaya elemen HTML.

Ubah Gaya HTML

Untuk mengubah gaya elemen HTML, gunakan sintaks ini:

document.getElementById(id).style.property = new style

Contoh di bawah ini mengubah <p> Element Style:

Contoh

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>Paragraf di atas telah diubah oleh skrip.</p>
</body>
</html>

Coba Sendiri

Penggunaan Acara

DOM HTML memungkinkan Anda melaksanakan kode saat acara terjadi.

Ketika "sesuatu" terjadi di elemen HTML, peramban akan menghasilkan acara:

  • Ketika elemen di klik
  • Ketika halaman dimuat
  • Ketika bidang input diubah

Anda akan belajar lebih banyak tentang acara di bab berikutnya di tutorial ini.

Pada contoh ini, elemen HTML dengan id="id1" akan diubah gayanya saat pengguna menekan tombol:

Contoh

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Judul Saya 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Klik Saya!
</button>
</body>
</html>

Coba Sendiri

Beberapa Contoh Lain

Visibilitas
Bagaimana agar elemen tidak terlihat. Apakah Anda ingin menampilkan elemen?

Panduan Referensi Objek Style DOM HTML

Untuk melihat semua properti gaya DOM HTML, kunjungi Panduan Referensi Objek Style DOM HTML.