CodeGym /Corsi /Frontend SELF IT /Attributi globali

Attributi globali

Frontend SELF IT
Livello 11 , Lezione 2
Disponibile

8.1 Attributo id

Gli attributi globali sono attributi che possono essere usati con qualsiasi elemento HTML. Giocano un ruolo chiave nell'identificazione, classificazione e gestione degli elementi delle pagine web.

L'attributo id è usato per identificare in modo univoco un elemento sulla pagina. Il valore dell'attributo id deve essere unico all'interno di tutto il documento HTML. Questo attributo è spesso utilizzato per collegare elementi con CSS e JavaScript.

Sintassi:

    
      <element id="unique-id">...</element>
    
  

Esempio d'uso:

CSS
    
      #header {
        background-color: #f4f4f4;
        padding: 10px;
      }
    
  
HTML
    
      <div id="header">
        <h1>Titolo</h1>
      </div>
    
  
JavaScript
    
      document.getElementById('header').style.color = 'blue';
    
  

Vantaggi:

  • Identificazione univoca: permette di identificare in modo chiaro gli elementi sulla pagina
  • Stilizzazione: comodo per applicare stili CSS
  • Manipolazione del DOM: facile accesso agli elementi tramite JavaScript

8.2 Attributo class

L'attributo class è utilizzato per assegnare uno o più classi a un elemento. Queste classi possono essere usate per applicare stili CSS e per manipolare gli elementi tramite JavaScript. A differenza di id, i valori delle classi non devono essere unici.

Sintassi:

    
      <element class="class-1 class-2">...</element>
    
  

Esempio d'uso:

CSS
    
      .highlight {
        background-color: yellow;
      }

      .bold {
        font-weight: bold;
      }
    
  
HTML
    
      <p class="highlight">Questo testo è evidenziato in giallo.</p>
      <p class="bold">Questo testo è in grassetto.</p>
      <p class="highlight bold">Questo testo è in grassetto ed evidenziato in giallo.</p>
    
  

Vantaggi:

  • Classi multiple: permette di assegnare più classi a un singolo elemento
  • Raggruppamento di elementi: facile applicazione di stili a gruppi di elementi
  • Manipolazione del DOM: facilita il lavoro con gruppi di elementi tramite JavaScript

8.3 Attributi data-*

Gli attributi data-* permettono di memorizzare dati personalizzati negli elementi HTML. Questi attributi iniziano con il prefisso data- e possono avere qualsiasi valore. Sono spesso utilizzati per memorizzare informazioni utili per JavaScript.

Sintassi:

    
      <element data-key="value">...</element>
    
  

Esempio d'uso:

HTML
    
      <div data-user-id="12345" data-role="admin">
        Utente con ID 12345, ruolo - amministratore.
      </div>
    
  
JavaScript
    
// Troviamo il primo elemento sulla pagina che ha l'attributo data-user-id
const userElement = document.querySelector('[data-user-id]');

// Otteniamo il valore dell'attributo data-user-id e lo stampiamo in console
console.log(userElement.dataset.userId); // Output: 12345

// Otteniamo il valore dell'attributo data-role e lo stampiamo in console
console.log(userElement.dataset.role); // Output: admin
    
  

Vantaggi:

  • Memorizzazione dei dati: comodo per la memorizzazione e la trasmissione di dati associati agli elementi
  • Accesso tramite JavaScript: facile accesso e modifica dei dati tramite il dataset API
  • Flessibilità: permette di aggiungere qualsiasi dato senza violare lo standard HTML
Commenti
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION