Una delle novità di HTML5 è l'introduzione di attributi globali personalizzati per l'aggiunta di dati agli elementi del DOM.
Questi attributi sono caratterizzati dal prefisso data- e possono contenere una gran varietà di informazioni e meta-informazioni per descrivere l'elemento, aprendo scenari d'uso molto interessanti, specie se abbinati ad un comportamento gestito tramite JavaScript.
<div id="content1" data-name="Matteo" data-userid="1234">Contenuto testuale</div>
L'esempio precedente costituisce markup perfettamente valido e di facile lettura e generazione.
In passato, a questo scopo, sono state utilizzate tecniche diverse come l'uso improprio di altri attributi esistenti (ad esempio class o title) o la definizione di uno spazio dei nomi XML; le specifiche di HTML5, ancora una volta, si dimostrano attente all'evoluzione che ha caratterizzato il web negli ultimi anni, fornendo uno strumento semplice ed efficacie per una necessità diffusa.
Il contenuto di questi attributi non produce alcun output da parte del browser e non sono quindi visualizzati dall'utente (in questo senso vengono infatti definiti "privati").
Possiamo accedere ai valori dei singoli dati associati ad un elemento tramite JavaScript leggendo direttamente l'attributo specifico, come mostrato nell'esempio seguente:
var item = document.getElementById("content1"); var name = item.getAttribute("data-name"); // Matteo var userid = item.getAttribute("data-userid"); // 1234
Allo stesso modo possiamo modificarne il valore:
var item = document.getElementById("content1"); item.setAttribute("data-name", "Mario");
In realtà, attraverso la proprietà dataset abbiamo direttamente a disposizione un elenco di coppie chiave/valore che contengono tutti gli attributi di dati personalizzati associati ad un elemento:
var item = document.getElementById("content1"); // lettura dei valori tramite dataset (proprietà): var name = item.dataset.name; // Matteo // lettura dei valori tramite dataset (chiave): var userid = item.dataset["userid"]; // 1234 // modifica valore dell'attributo "data-name": item.dataset.name = "Mario";
Usando jQuery possiamo invece utilizzare il metodo .data() per accedere agli attributi data-*:
var name = $("#content1").data("name"); $("#content1").data("userid", 789);
La specifica completa è disponibile all'indirizzo: http://dev.w3.org/html5/spec/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Triggerare una pipeline su un altro repository di Azure DevOps
Integrare SQL Server in un progetto .NET Aspire
Montare Azure Blob Storage su Linux con BlobFuse2
Selettore CSS :has() e i suoi casi d'uso avanzati
Eliminare una project wiki di Azure DevOps
Fornire parametri ad un Web component HTML
Supportare la sessione affinity di Azure App Service con Application Gateway
Utilizzare Hybrid Cache in .NET 9
Utilizzare WhenEach per processare i risultati di una lista di task
Recuperare le subissue e il loro stato di completamento in GitHub
Gestire progetti NPM in .NET Aspire
Creare una libreria CSS universale: Cards
I più letti di oggi
- Impersonation di utente per l'esecuzione di codice in una pagina ASP.NET
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi