Esercizi Attributi e Proprietà JavaScript

Codegrind Team•Jul 12 2024

Ecco degli esercizi con soluzione per praticare l’uso di attributi e proprietà nel DOM in JavaScript.

Esercizio 1: Modifica di un Attributo

Modificare l'attributo `src` di un'immagine.

<!DOCTYPE html>
<html>
  <head>
    <title>Modifica di un Attributo</title>
  </head>
  <body>
    <img id="immagine" src="immagine1.jpg" alt="Immagine" />
    <button onclick="cambiaImmagine()">Cambia Immagine</button>

    <script>
      function cambiaImmagine() {
        var img = document.getElementById("immagine");
        img.setAttribute("src", "immagine2.jpg");
      }
    </script>
  </body>
</html>

Esercizio 2: Aggiunta di un Attributo

Aggiungere un attributo `title` a un paragrafo.

<!DOCTYPE html>
<html>
  <head>
    <title>Aggiunta di un Attributo</title>
  </head>
  <body>
    <p id="paragrafo">Passa il mouse su questo paragrafo.</p>
    <button onclick="aggiungiAttributo()">Aggiungi Attributo</button>

    <script>
      function aggiungiAttributo() {
        var p = document.getElementById("paragrafo");
        p.setAttribute("title", "Questo è un tooltip.");
      }
    </script>
  </body>
</html>

Esercizio 3: Rimozione di un Attributo

Rimuovere l'attributo `disabled` da un pulsante.

<!DOCTYPE html>
<html>
  <head>
    <title>Rimozione di un Attributo</title>
  </head>
  <body>
    <button id="pulsante" disabled>Non cliccabile</button>
    <button onclick="rimuoviAttributo()">Rendi Cliccabile</button>

    <script>
      function rimuoviAttributo() {
        var btn = document.getElementById("pulsante");
        btn.removeAttribute("disabled");
      }
    </script>
  </body>
</html>

Esercizio 4: Modifica di una Proprietà

Modificare la proprietà `innerHTML` di un elemento `div`.

<!DOCTYPE html>
<html>
  <head>
    <title>Modifica di una Proprietà</title>
  </head>
  <body>
    <div id="contenitore">Testo originale</div>
    <button onclick="modificaContenuto()">Modifica Contenuto</button>

    <script>
      function modificaContenuto() {
        var div = document.getElementById("contenitore");
        div.innerHTML = "Nuovo testo";
      }
    </script>
  </body>
</html>

Esercizio 5: Lettura di un Attributo

Leggere l'attributo `href` di un link e visualizzarlo in un alert.

<!DOCTYPE html>
<html>
  <head>
    <title>Lettura di un Attributo</title>
  </head>
  <body>
    <a id="link" href="https://www.example.com">Vai a Example</a>
    <button onclick="leggiAttributo()">Leggi Attributo</button>

    <script>
      function leggiAttributo() {
        var link = document.getElementById("link");
        var href = link.getAttribute("href");
        alert("Il link punta a: " + href);
      }
    </script>
  </body>
</html>

Esercizio 6: Verifica di un Attributo

Verificare se un elemento ha un attributo `class`.

<!DOCTYPE html>
<html>
  <head>
    <title>Verifica di un Attributo</title>
  </head>
  <body>
    <div id="contenitore" class="box">Contenitore</div>
    <button onclick="verificaAttributo()">Verifica Attributo</button>

    <script>
      function verificaAttributo() {
        var div = document.getElementById("contenitore");
        if (div.hasAttribute("class")) {
          alert("L'attributo 'class' esiste.");
        } else {
          alert("L'attributo 'class' non esiste.");
        }
      }
    </script>
  </body>
</html>

Esercizio 7: Modifica della Proprietà `style`

Modificare la proprietà `style` di un elemento `div` per cambiarne il colore di sfondo.

<!DOCTYPE html>
<html>
  <head>
    <title>Modifica della Proprietà style</title>
  </head>
  <body>
    <div
      id="contenitore"
      style="width: 100px; height: 100px; background-color: red;"></div>
    <button onclick="cambiaColore()">Cambia Colore</button>

    <script>
      function cambiaColore() {
        var div = document.getElementById("contenitore");
        div.style.backgroundColor = "blue";
      }
    </script>
  </body>
</html>

Esercizio 8: Modifica della Proprietà `className`

Modificare la proprietà `className` di un elemento `div` per applicare una nuova classe CSS.

<!DOCTYPE html>
<html>
  <head>
    <title>Modifica della Proprietà className</title>
    <style>
      .nuovoStile {
        background-color: green;
        color: white;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="contenitore" class="vecchioStile">Contenitore</div>
    <button onclick="cambiaClasse()">Cambia Classe</button>

    <script>
      function cambiaClasse() {
        var div = document.getElementById("contenitore");
        div.className = "nuovoStile";
      }
    </script>
  </body>
</html>