📢 Nuovo Corso Laravel API disponibile!

Maninpolare CSS in Javascript

La manipolazione del CSS utilizzando JavaScript è una tecnica potente che consente di cambiare dinamicamente gli stili e l’aspetto degli elementi HTML in una pagina web. Questo può essere particolarmente utile per creare interfacce utente interattive e visivamente accattivanti. Esploriamo come è possibile manipolare le proprietà CSS utilizzando JavaScript.

Cambiare le Proprietà CSS

Puoi cambiare le proprietà CSS degli elementi utilizzando JavaScript. Ecco alcuni modi comuni per farlo:

1. Cambiare gli Stili

Per cambiare una specifica proprietà di stile di un elemento, puoi utilizzare la proprietà style e assegnare nuovi valori.

Esempio:

<p id="paragrafo">Questo è un paragrafo.</p>
<script>
const paragrafo = document.getElementById("paragrafo");
paragrafo.style.color = "rosso";
paragrafo.style.fontSize = "20px";
</script>

2. Aggiungere e Rimuovere Classi CSS

Puoi aggiungere o rimuovere classi CSS dagli elementi per applicare stili predefiniti.

Esempio:

<p id="paragrafo">Questo è un paragrafo.</p>
<script>
const paragrafo = document.getElementById("paragrafo");
paragrafo.classList.add("evidenzia");
paragrafo.classList.remove("evidenzia");
</script>
<style>
.evidenzia {
background-color: giallo;
}
</style>

3. Cambiare Visibilità

Puoi cambiare la visibilità di un elemento utilizzando le proprietà CSS, come display o visibility.

Esempio:

<div id="contenitore"></div>
<script>
const contenitore = document.getElementById("contenitore");
contenitore.style.display = "none"; // L'elemento non è visibile
contenitore.style.display = "block"; // L'elemento è visibile
</script>

4. Cambiare lo Sfondo

Puoi cambiare il colore dello sfondo di un elemento utilizzando la proprietà backgroundColor.

Esempio:

<button id="pulsante">Clicca qui</button>
<script>
const pulsante = document.getElementById("pulsante");
pulsante.style.backgroundColor = "verde";
</script>

Manipolare Classi

Puoi aggiungere, rimuovere e cambiare classi CSS da un elemento utilizzando JavaScript.

1. Aggiungere una Classe

Per aggiungere una classe a un elemento, puoi utilizzare il metodo classList.add().

Esempio:

<p id="paragrafo">Questo è un paragrafo.</p>
<script>
const paragrafo = document.getElementById("paragrafo");
paragrafo.classList.add("evidenzia");
</script>
<style>
.evidenzia {
background-color: giallo;
}
</style>

2. Rimuovere una Classe

Per rimuovere una classe da un elemento, puoi utilizzare il metodo classList.remove().

Esempio:

<p id="paragrafo" class="evidenzia">Questo è un paragrafo evidenziato.</p>
<script>
const paragrafo = document.getElementById("paragrafo");
paragrafo.classList.remove("evidenzia");
</script>
<style>
.evidenzia {
background-color: giallo;
}
</style>

3. Cambiare una Classe

Puoi cambiare una classe da un elemento utilizzando il metodo classList.replace().

Esempio:

<p id="paragrafo" class="evidenzia">Questo è un paragrafo evidenziato.</p>
<script>
const paragrafo = document.getElementById("paragrafo");
paragrafo.classList.replace("evidenzia", "importante");
</script>
<style>
.importante {
font-weight: bold;
}
</style>

4. Toggle di una Classe

Il metodo classList.toggle() consente di aggiungere una classe se non è presente e rimuoverla se è già presente.

<button id="toggleBtn">Clicca per cambiare</button>
<script>
const toggleBtn = document.getElementById('toggleBtn');
toggleBtn.addEventListener('click', () => {
toggleBtn.classList.toggle('active');
});
</script>
<style>
.active {
background-color: blu;
color: bianco;
}
</style>

Conclusioni

La manipolazione del CSS con JavaScript consente di apportare modifiche dinamiche agli stili degli elementi HTML in modo da creare esperienze utente interattive e dinamiche.