Javascript

DOM CSS: Cara Membuat dan Contoh Codenya

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" 
>

Catur Kurnia Sari

Share
Tags: javascript