HTML DOM memungkinkan JavaScript untuk mengubah gaya elemen HTML.
Mengubah Gaya HTML
Untuk mengubah gaya elemen HTML, gunakan sintaks ini:
document.getElementById(id).style.property=new style
Contoh berikut mengubah gaya <p> elemen:
Contoh
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
Cobalah sendiri " menggunakan Events
HTML DOM memungkinkan Anda untuk mengeksekusi kode ketika suatu peristiwa terjadi.
Acara yang dihasilkan oleh browser ketika "sesuatu terjadi" untuk elemen HTML:
- Sebuah elemen diklik pada
- halaman telah dimuat
- field input diubah
Anda akan belajar lebih banyak tentang peristiwa di bab berikutnya dari tutorial ini.
Contoh ini mengubah gaya elemen HTML dengan id="id1" , ketika pengguna mengklik tombol:
Contoh
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html> Cobalah sendiri " Contoh lebih
Visibilitas Cara membuat elemen tak terlihat. Apakah Anda ingin menunjukkan elemen atau tidak?
HTML DOM Style Object Reference
Untuk semua properti gaya HTML DOM, melihat lengkap kami Obyek Referensi HTML DOM Style .
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »