Vlad Merzhevich
All'HTML 4 mancava gravemente la capacità di creare i propri attributi per memorizzare i valori. Perché è necessario? Ecco alcune attività in cui potresti averne bisogno.
- Creazione di tooltip senza script.
- Determinazione dello stile di un elemento in base al valore di un attributo.
- Ottenere e modificare i valori attraverso gli script.
HTML5 introduce un nuovo attributo generico che puoi aggiungere a qualsiasi tag. Le regole per scrivere l'attributo sono semplici:
- inizia sempre con dati-;
- usiamo solo lettere latine, trattino (-), due punti (:) e trattino basso (_).
CSS e JavaScript fanno riferimento a tali attributi in modo leggermente diverso, quindi diamo un'occhiata agli esempi per loro separatamente.
CSS
Ci sono attributi di tag in CSS, se c'è qualche attributo o un dato valore, impostiamo lo stile richiesto.
Ora, negli stili, possiamo fare riferimento a questo elemento come div e impostare il design desiderato per esso. In generale, assomiglia al modo in cui funzionano le classi, quindi non è una caratteristica unica o necessaria. Quindi è più utile impostare i valori.
In CSS, dopodiché possiamo impostare uno stile diverso per diversi valori del nostro attributo data-columns.
Div (larghezza: 480 px;) div (larghezza: 720 px;)
Di nuovo, questo è in una certa misura un sostituto delle classi, perché nulla ti impedisce di creare classi con i nomi colonna-2, colonna-3 e di aggiungerle se necessario.
Un caso d'uso migliore è l'inclusione della funzione attr(). Ottiene il valore dell'attributo dato e lo inserisce nello stile. È comodo usarlo per creare suggerimenti. Scriviamo il testo direttamente all'interno dell'elemento e implementiamo la visualizzazione e il design del tooltip tramite CSS.
Temperatura dell'acqua
In questo esempio, all'elemento
JavaScript
Se in CSS ci riferiamo direttamente al nome dell'attributo, specificandolo per intero, in JavaScript ciò avviene tramite il dataset. Il nome dell'attributo stesso viene convertito in una variabile secondo le seguenti regole:
- i dati vengono scartati;
- qualsiasi trattino che precede la lettera viene scartato e la lettera successiva viene maiuscola.
In pratica, sembra così.
la descrizione dei dati diventa descrizione.
data-full-description diventa fullDescription.
data-description-of-tag diventa descriptionOfTag.
Il modo tradizionale per accedere a un elemento e ai suoi attributi consiste nell'impostare un identificatore e fare riferimento all'elemento tramite getElementById, come mostrato nell'esempio seguente.
Innanzitutto, aggiungiamo un identificatore con un valore univoco all'elemento. Quindi accediamo all'elemento tramite getElementById. Ora possiamo accedere a qualsiasi attributo di dati tramite il metodo del set di dati e non solo ottenere, ma anche impostare valori. Verranno memorizzati fino al ricaricamento della pagina o fino all'impostazione di un nuovo valore.
Prima della creazione di HTML5, lavorare con gli attributi negli elementi HTML non era, per usare un eufemismo, un piacere. Ho dovuto usare attributi come rel o class. E alcuni sviluppatori hanno persino creato i propri attributi.
Ma le cose sono cambiate radicalmente quando HTML5 ci ha fornito la possibilità di utilizzare i loro attributi di dati. Ora è abbastanza facile salvare dati aggiuntivi con mezzi standard.
Come funzionano gli attributi della data?
Il nome parla da solo. Gli attributi di data memorizzano alcuni dati specificati. Iniziano sempre con il prefisso data e terminano con qualcosa di più comprensibile per lo sviluppatore (secondo le specifiche, sono consentiti solo caratteri minuscoli e trattini). Un elemento può contenere un numero qualsiasi di attributi di data.
Un esempio di utilizzo degli attributi per memorizzare i dati dell'utente:
Naturalmente, questi dati non aiutano molto l'utente finale, dal momento che semplicemente non lo vede, ma gli attributi della data sono molto utilizzati nelle moderne tecnologie web.
Ecco un esempio di pulsante per eliminare qualcosa sulla tua pagina:
Tutti i parametri necessari sono a portata di mano e pronti per essere inviati allo script di backend. Niente più attributi rel o gestione degli ID o l'azione richiesta da altri attributi.
Cosa si può memorizzare?
Vale la pena ricordare solo una regola, gli oggetti non possono essere archiviati negli attributi della data. Cioè, puoi, se li seriali in anticipo. Per ora, ricorda solo che, in linea di principio, puoi memorizzare solo dati di stringa.
Leggere/scrivere attributi usando javascript
Torniamo al nostro esempio di pulsante e vediamo come possiamo accedere agli attributi richiesti.
// Questo è un pulsante var button = document.getElementById ("your-button-id"); // Ottieni il valore var cmd = button.getAttribute ("data-cmd"); id var = button.getAttribute ("id-dati"); // Modifica il valore di button.setAttribute ("data-cmd", yourNewCmd); button.setAttribute ("data-id", yourNewId);
Abbastanza semplice, non è vero? Ora passa semplicemente i parametri cmd e id alla tua applicazione ed esegui la richiesta ajax richiesta.
Leggere/scrivere gli attributi della data utilizzando jQuery.
Ecco un analogo jQuery:
// Ottieni il valore var cmd = $ ("# your-button-id") Attr ("data-cmd"); var id = $ ("# your-button-id"). attr ("data-id"); // Modifica il valore $ ("# your-button-id") .attr ("data-cmd", yourNewCmd) .attr ("data-id", yourNewId);
Da non confondere con il metodo data() . Sebbene abbiano qualcosa in comune, in generale sono cose completamente diverse. Anche se non hai familiarità con questi metodi, usa semplicemente attr().
Utilizzo dell'API del set di dati
HTML5 ci offre persino un'API per lavorare con gli attributi dei dati, sebbene IE10 e versioni precedenti non lo supportino.
Di nuovo, un esempio con un pulsante, ma questa volta utilizzando l'API del set di dati:
// Questo è un pulsante var button = document.getElementById ("your-button-id"); // Ottieni il valore var cmd = button.dataset.cmd; id variabile = button.dataset.id; // Modifica il valore di button.dataset.cmd = yourNewCmd; button.dataset.id = tuoNuovoId;
Notare l'assenza del prefisso dei dati e dei trattini. Proprio come lavorare con le proprietà CSS in JavaScript, hai bisogno di un involucro a gobba. L'API Dataset traduce i nomi degli attributi in modo che data-some-attribute-name in HTML diventi dataset.someAttributeName in JavaScript.
Cosa si può fare con gli attributi della data
Gli esempi forniti sono solo la base. Puoi eseguire operazioni molto più complesse con gli attributi di data. Diamo un'occhiata ad alcuni esempi.
Filtrazione
Supponiamo che tu stia lavorando con un elenco di elementi e devi filtrarli per parola chiave. Inserisci le parole chiave negli attributi dei dati ed elaborale utilizzando un piccolo script iterativo.
- Guado
- Chevrolet ...
Un esempio "sul ginocchio":
$ ("# filtro"). on ("keyup", funzione () (parola chiave var = $ (questo) .val (). toLowerCase (); $ (". automobili> li"). each (funzione () ( $ (questo) .toggle (parola chiave.lunghezza< 1 || $(this).attr("data-models").indexOf(keyword) > -1); } ); } );
stilizzazione
Ovviamente, gli stili si applicano meglio usando le classi, ma lo stesso può essere fatto usando gli attributi dei dati. In questo modo puoi applicare uno stile agli elementi che hanno un attributo di dati specifico, indipendentemente dal suo valore. Diamo prima un'occhiata all'HTML:
E ora il CSS:
(sfondo: rosso;)
Ma come si considera il valore di un attributo? Ecco come puoi applicare uno stile a tutti gli elementi con un attributo di avviso dati il cui valore contiene la parola errore:
(colore rosso;)
personalizzazione
Il noto framework Bootstrap utilizza gli attributi dei dati per personalizzare i suoi plug-in JavaScript. Esempio di popup:
Il modo migliore per archiviare i dati
Gli attributi di data sono molto comuni nelle tecnologie web. Ancora più importante, sono completamente supportati dai browser meno recenti e stanno penetrando sempre più in profondità negli standard web. E poiché lo standard HTML è già stato approvato, puoi lavorare con loro oggi e non aver paura che scompaiano improvvisamente domani.
