Modifica degli Stili degli Elementi con JavaScript

Nello sviluppo web, spesso è necessario modificare dinamicamente gli stili degli elementi. JavaScript offre due modalità principali per cambiare l'aspetto degli elementi: aggiornare gli stili inline utilizzando la proprietà style e gestire le classi con classList.

Modifica degli stili inline tramite la proprietà style

La proprietà style in JavaScript consente di modificare direttamente il CSS inline di un elemento HTML. Questo metodo offre il pieno controllo sulle singole proprietà CSS, ma è limitato agli stili inline e influisce solo sull'elemento specifico.

È possibile modificare le singole proprietà CSS utilizzando la notazione a punti sull'oggetto style di un elemento. I nomi delle proprietà sono scritti in camelCase (ad esempio, backgroundColor invece di background-color).

index.html

index.css

index.js

La proprietà style viene utilizzata per modificare gli stili inline dell'elemento #box. Ogni proprietà CSS è accessibile come una proprietà individuale di JavaScript (ad esempio, box.style.backgroundColor), consentendo di cambiare dinamicamente aspetti specifici dello stile dell'elemento.

Aggiunta e rimozione di classi CSS con classList

La proprietà classList offre un modo più flessibile e potente per gestire gli stili di un elemento aggiungendo, rimuovendo o alternando le classi CSS. Questo metodo è più manutenibile rispetto alla modifica diretta degli stili inline, poiché consente di sfruttare i file CSS esterni e di mantenere separata la logica di stile dal codice JavaScript.

index.html

index.css

index.js

classList.toggle() viene utilizzato per aggiungere o rimuovere la classe highlight quando si clicca sul pulsante. Questo metodo evita di sovraccaricare l'attributo style inline e si basa su regole CSS predefinite per una migliore manutenibilità.

Esempio pratico: Cambio del tema

Consideriamo un esempio pratico in cui l'utente può passare da un tema chiaro a uno scuro utilizzando classList.

index.html

index.css

index.js

classList.replace() viene utilizzato per scambiare le classi light-theme e dark-theme in base allo stato corrente.

1. Quale proprietà viene utilizzata per modificare gli stili inline di un elemento?

2. Come cambieresti il colore di sfondo di un `<div>` con ID `box` in coral utilizzando JavaScript?

3. Cosa fa il seguente codice?

Quale proprietà viene utilizzata per modificare gli stili inline di un elemento?

Select the correct answer

style

classList

getComputedStyle()

Come cambieresti il colore di sfondo di un <div> con ID box in coral utilizzando JavaScript?

Select the correct answer

document.getElementById('box').classList.add('coral');

document.getElementById('box').style.color = 'coral';

document.getElementById('box').style.backgroundColor = 'coral';

document.getElementById('box').setAttribute('backgroundColor', 'coral');

Cosa fa il seguente codice?

Select the correct answer

Aggiunge la classe active se non esiste; la rimuove se è già presente.

Imposta la classe active come stile inline sul pulsante.

Aggiunge solo la classe active senza rimuoverla.

Cambia il colore di sfondo in active.

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 12

Chieda ad AI

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 2.22

Modifica degli Stili degli Elementi con JavaScript

Scorri per mostrare il menu

Modifica degli stili inline tramite la proprietà style

index.html

index.css

index.js

Aggiunta e rimozione di classi CSS con classList

index.html

index.css

index.js

Esempio pratico: Cambio del tema

Consideriamo un esempio pratico in cui l'utente può passare da un tema chiaro a uno scuro utilizzando classList.

index.html

index.css

index.js

classList.replace() viene utilizzato per scambiare le classi light-theme e dark-theme in base allo stato corrente.

1. Quale proprietà viene utilizzata per modificare gli stili inline di un elemento?

2. Come cambieresti il colore di sfondo di un `<div>` con ID `box` in coral utilizzando JavaScript?

3. Cosa fa il seguente codice?

Quale proprietà viene utilizzata per modificare gli stili inline di un elemento?

Select the correct answer

style

classList

getComputedStyle()

Come cambieresti il colore di sfondo di un <div> con ID box in coral utilizzando JavaScript?

Select the correct answer

document.getElementById('box').classList.add('coral');

document.getElementById('box').style.color = 'coral';

document.getElementById('box').style.backgroundColor = 'coral';

document.getElementById('box').setAttribute('backgroundColor', 'coral');

Cosa fa il seguente codice?

Select the correct answer

Aggiunge la classe active se non esiste; la rimuove se è già presente.

Imposta la classe active come stile inline sul pulsante.

Aggiunge solo la classe active senza rimuoverla.

Cambia il colore di sfondo in active.

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 12

Modifica degli Stili degli Elementi con JavaScript

Modifica degli stili inline tramite la proprietà style

Aggiunta e rimozione di classi CSS con classList

Esempio pratico: Cambio del tema

1. Quale proprietà viene utilizzata per modificare gli stili inline di un elemento?

2. Come cambieresti il colore di sfondo di un <div> con ID box in coral utilizzando JavaScript?

3. Cosa fa il seguente codice?

Awesome!

Modifica degli Stili degli Elementi con JavaScript

Modifica degli stili inline tramite la proprietà style

Aggiunta e rimozione di classi CSS con classList

Esempio pratico: Cambio del tema

1. Quale proprietà viene utilizzata per modificare gli stili inline di un elemento?

2. Come cambieresti il colore di sfondo di un <div> con ID box in coral utilizzando JavaScript?

3. Cosa fa il seguente codice?

2. Come cambieresti il colore di sfondo di un `<div>` con ID `box` in coral utilizzando JavaScript?

2. Come cambieresti il colore di sfondo di un `<div>` con ID `box` in coral utilizzando JavaScript?