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:
#header {
background-color: #f4f4f4;
padding: 10px;
}
<div id="header">
<h1>Titolo</h1>
</div>
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:
.highlight {
background-color: yellow;
}
.bold {
font-weight: bold;
}
<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:
<div data-user-id="12345" data-role="admin">
Utente con ID 12345, ruolo - amministratore.
</div>
// 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
GO TO FULL VERSION