Ubah Gaya Elemen

Pelajaran 4 dari 13 dalam kursus Metode DOM JavaScript di Coddy.

Property berikutnya yang akan kita pelajari adalah style, yang bertanggung jawab untuk mengubah gaya yang sudah ada. Kamu dapat memodifikasi gaya seperti ini:

const element = document.getElementById("elementID");
element.style.color = "green";

Setelah kode ini dijalankan, warna #elementID akan berubah menjadi green.

Tantangan

Mudah

Kamu diberi kode HTML yang berisi div dengan ID.

Hanya menggunakan JavaScript, ubah warna latar belakang div ini menjadi merah:

Ambil elemen menggunakan fungsi getElementById.
Ubah style warna latar belakang elemen menggunakan property style.backgroundColor.

Coba sendiri

<!DOCTYPE html>
<html>
    <body>
        <div id="box" style="width: 100px; height: 100px;">Content</div>
        <script src="script.js"></script>
    </body>
</html>

Semua pelajaran di Metode DOM JavaScript

1Pengantar

Pengantar Document Object Model

2Metode DOM I

getElementByIdUbah Gaya ElemengetElementsByClassName Telusuri dan Manipulasi getElementsByTagName querySelector

3Method DOM II

querySelectorAll addEventListener innerHTML createElement and appendChild classList toggle

Latihan sendiri: Playground Web