Esercizi Classi CSS in JavaScript

Codegrind Team•Jul 12 2024

Ecco degli esercizi con soluzione per praticare la manipolazione delle classi CSS utilizzando JavaScript.

Esercizio 1: Aggiungere una Classe

Aggiungere una classe CSS a un elemento `div` al clic di un pulsante.

<!DOCTYPE html>
<html>
  <head>
    <title>Aggiungere una Classe</title>
    <style>
      .highlight {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="contenitore">Questo è un contenitore</div>
    <button onclick="aggiungiClasse()">Aggiungi Classe</button>

    <script>
      function aggiungiClasse() {
        var div = document.getElementById("contenitore");
        div.classList.add("highlight");
      }
    </script>
  </body>
</html>

Esercizio 2: Rimuovere una Classe

Rimuovere una classe CSS da un elemento `div` al clic di un pulsante.

<!DOCTYPE html>
<html>
  <head>
    <title>Rimuovere una Classe</title>
    <style>
      .highlight {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="contenitore" class="highlight">Questo è un contenitore</div>
    <button onclick="rimuoviClasse()">Rimuovi Classe</button>

    <script>
      function rimuoviClasse() {
        var div = document.getElementById("contenitore");
        div.classList.remove("highlight");
      }
    </script>
  </body>
</html>

Esercizio 3: Toggle di una Classe

Alternare una classe CSS su un elemento `div` al clic di un pulsante.

<!DOCTYPE html>
<html>
  <head>
    <title>Toggle di una Classe</title>
    <style>
      .highlight {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="contenitore">Questo è un contenitore</div>
    <button onclick="toggleClasse()">Toggle Classe</button>

    <script>
      function toggleClasse() {
        var div = document.getElementById("contenitore");
        div.classList.toggle("highlight");
      }
    </script>
  </body>
</html>

Esercizio 4: Verificare la Presenza di una Classe

Verificare se un elemento `div` ha una determinata classe CSS e visualizzare il risultato in un alert.

<!DOCTYPE html>
<html>
  <head>
    <title>Verificare la Presenza di una Classe</title>
    <style>
      .highlight {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="contenitore" class="highlight">Questo è un contenitore</div>
    <button onclick="verificaClasse()">Verifica Classe</button>

    <script>
      function verificaClasse() {
        var div = document.getElementById("contenitore");
        if (div.classList.contains("highlight")) {
          alert("La classe 'highlight' è presente.");
        } else {
          alert("La classe 'highlight' non è presente.");
        }
      }
    </script>
  </body>
</html>

Esercizio 5: Aggiungere Più Classi

Aggiungere più classi CSS a un elemento `div` al clic di un pulsante.

<!DOCTYPE html>
<html>
  <head>
    <title>Aggiungere Più Classi</title>
    <style>
      .highlight {
        background-color: yellow;
      }
      .bold {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="contenitore">Questo è un contenitore</div>
    <button onclick="aggiungiClassi()">Aggiungi Classi</button>

    <script>
      function aggiungiClassi() {
        var div = document.getElementById("contenitore");
        div.classList.add("highlight", "bold");
      }
    </script>
  </body>
</html>

Esercizio 6: Rimuovere Più Classi

Rimuovere più classi CSS da un elemento `div` al clic di un pulsante.

<!DOCTYPE html>
<html>
  <head>
    <title>Rimuovere Più Classi</title>
    <style>
      .highlight {
        background-color: yellow;
      }
      .bold {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="contenitore" class="highlight bold">Questo è un contenitore</div>
    <button onclick="rimuoviClassi()">Rimuovi Classi</button>

    <script>
      function rimuoviClassi() {
        var div = document.getElementById("contenitore");
        div.classList.remove("highlight", "bold");
      }
    </script>
  </body>
</html>

Esercizio 7: Modificare Classi Condizionalmente

Modificare le classi CSS di un elemento `div` in base a una condizione.

<!DOCTYPE html>
<html>
  <head>
    <title>Modificare Classi Condizionalmente</title>
    <style>
      .highlight {
        background-color: yellow;
      }
      .bold {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="contenitore">Questo è un contenitore</div>
    <button onclick="modificaClassi()">Modifica Classi</button>

    <script>
      function modificaClassi() {
        var div = document.getElementById("contenitore");
        if (div.textContent.includes("contenitore")) {
          div.classList.add("highlight", "bold");
        } else {
          div.classList.remove("highlight", "bold");
        }
      }
    </script>
  </body>
</html>

Esercizio 8: Alternare Classi Multiple

Alternare più classi CSS su un elemento `div` al clic di un pulsante.

<!DOCTYPE html>
<html>
  <head>
    <title>Alternare Classi Multiple</title>
    <style>
      .highlight {
        background-color: yellow;
      }
      .bold {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div id="contenitore">Questo è un contenitore</div>
    <button onclick="toggleClassi()">Toggle Classi</button>

    <script>
      function toggleClassi() {
        var div = document.getElementById("contenitore");
        div.classList.toggle("highlight");
        div.classList.toggle("bold");
      }
    </script>
  </body>
</html>