Modificare lo stile di un elemento

Lezione 4 di 13 del corso Metodi DOM di JavaScript di Coddy.

La prossima proprietà che impareremo è style, responsabile della modifica degli stili esistenti. Puoi modificare lo stile in questo modo:

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

Dopo questo codice, il colore di #elementID verrà cambiato in green.

Sfida

Facile

Ti viene fornito del codice HTML che contiene un div con un ID.

Usando solo JavaScript, cambia il colore di sfondo di questo div in rosso:

Recupera l'elemento usando la funzione getElementById.
Modifica la proprietà style.backgroundColor dello stile del colore di sfondo dell'elemento.

Provalo tu

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

Tutte le lezioni di Metodi DOM di JavaScript

1Introduzione

Introduzione Document Object Model

2Metodi DOM I

getElementByIdModificare lo stile di un elementogetElementsByClassName Iterare e manipolare getElementsByTagName querySelector

3Metodi DOM II

querySelectorAll addEventListener innerHTML createElement e appendChild Attivazione/disattivazione con classList

Esercitati da solo: Playground Web