DOM CSS: Cara Membuat dan Contoh Codenya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 22, 2020

DOM HTML memungkinkan JavaScript untuk mengubah style elemen HTML.

Mengubah Style HTML

Untuk mengubah style elemen HTML, gunakan sintaks ini:

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

Contoh berikut menunjukan cara mengubah style elemen <p>.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>

<p> Paragraf di atas diubah oleh sebuah skrip. </p>
</body>
</html>

Menggunakan Event

DOM HTML memungkinkan untuk mengeksekusi kode ketika suatu event terjadi.

Event dibuat oleh browser ketika “sesuatu terjadi” pada elemen HTML, contohnya:

Sebuah elemen diklik
Halaman telah dimuat
Bidang input diubah

Contoh ini menunjukan cara mengubah style elemen HTML dengan id = “id1”, saat pengguna mengklik tombol.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">Heading 1</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Klik!</button>

</body>
</html>

javascript