Il valore dell'attributo dati html5 php. Classi come oggetto: classList

Come puoi vedere, puoi specificare qualsiasi nome e qualsiasi valore. Ma dopotutto, questi parametri non fanno nulla con l'elemento, perché allora sono necessari? Esistono almeno diversi modi per utilizzare gli attributi dei dati nella creazione di siti e diamo un'occhiata a questi.

Uso 1 - riferendosi agli elementi in css

Se sai cosa sono i selettori di attributi, probabilmente sai già come possono essere utilizzate le nuove funzionalità. Specificando un attributo di dati univoco per un tag, è possibile fare riferimento ad esso in modo appropriato negli stili. Facciamo un esempio:

Questo ci ha permesso di fare riferimento a un elemento senza usare le classi di stile. Tuttavia, se lo pensi, questo non offre alcun vantaggio speciale; per fare riferimento alla classe, devi eseguire all'incirca gli stessi passaggi. Pertanto, espandi semplicemente le possibilità per i selettori e niente di più.

Caso d'uso 2: memorizzare i valori e utilizzarli

A prima vista, i valori degli attributi dei dati non cambiano nulla e non influiscono affatto sulla pagina web. Allora perché sono necessari? In effetti, puoi trovare il loro uso se ricordi la funzione attr () in css.

Definiamo il compito: devi visualizzare un testo esplicativo per le foto sulla pagina, che apparirà immediatamente con il caricamento dell'immagine o quando ci passi sopra con il mouse, non importa come. Il suggerimento standard è implementato con attributo del titolo.

Ma un simile suggerimento potrebbe non soddisfarti in molti modi. In primo luogo, appare senza intoppi (che non è sempre necessario). In secondo luogo, scompare nel tempo. Terzo, appare in posti diversi, a seconda di dove è posizionato il cursore. Bene, il più un grosso problema- non possiamo modellare in alcun modo il nostro suggerimento - sarà sempre testo nero su sfondo bianco, il che non è molto interessante.

Quindi, sopra nel codice, abbiamo inserito un'immagine, indicato il percorso e inoltre scritto un parametro di dati arbitrario. Ora puoi implementare l'output di una spiegazione alla foto in questo modo:

img (display: inline-block;) img: after (content: attr (data-img);)

Cosa abbiamo fatto? Ora tutte le immagini avranno uno pseudo-elemento contenente il valore attributo dei dati-img se ce l'ha tag img... In un modo così semplice, sei stato in grado di visualizzare il testo esplicativo per la foto.

In questo articolo, non darò istruzioni su come elaborare un suggerimento. Dirò solo che per impostazione predefinita verrà visualizzato dopo che la pagina è stata caricata. Spesso è necessario nasconderlo inizialmente e visualizzarlo quando si passa con il mouse sull'immagine. Per fare ciò, è necessario utilizzare il selettore img: hover: after.

Bene, quali altri attributi html5 sono presenti solo in questa specifica? Questi includono, ad esempio, i controlli, un attributo per i nuovi elementi audio e video che consente di visualizzare i controlli di registrazione video o audio.

Per i video, utilizzando il parametro poster, puoi specificare il percorso dell'immagine che sarà lo sfondo prima di iniziare a guardare il video. In generale, non sono apparsi così pochi attributi così piccoli.

Anche in un unico elemento di input ci sono molti nuovi parametri. Ora puoi creare campi di input E-mail, telefono, selezione della data o dell'ora del calendario, campo di selezione del colore, ecc. Vuoto attributo richiesto rende obbligatorio alcun campo, se non lo fai, il browser semplicemente non salterà l'invio del modulo.

Naturalmente, l'unico inconveniente di tutte queste innovazioni è che non sono adeguatamente supportate ovunque. Quindi, mentre le nuove funzionalità funzionano alla grande in un browser e gli utenti possono utilizzare i nuovi campi, le cose potrebbero essere diverse in un altro browser. Ovviamente, in parte la colpa è degli utenti stessi che non aggiornano il software, ma è anche necessario tenere traccia di cosa è supportato e come. V

Ai tempi di XHTML/HTML4, c'erano solo poche funzionalità che gli sviluppatori potevano usare per memorizzare dati arbitrari relativi al DOM. Potevi inventare i tuoi attributi, ma era rischioso: il tuo codice non sarebbe stato valido, i browser potrebbero ignorare i tuoi dati e questo potrebbe causare problemi se il nome corrispondeva agli attributi HTML standard.

Pertanto, la maggior parte degli sviluppatori si legava agli attributi class o rel poiché erano l'unico modo sano di archiviare linee aggiuntive... Ad esempio, supponiamo di creare un widget per visualizzare i post come la timeline dei post di Twitter. Idealmente, JavaScript dovrebbe essere configurabile senza dover riscrivere il codice, quindi definiamo l'ID utente nell'attributo class, ad esempio:

I nostri codice JavaScript cercherà l'elemento con ID msglist... Con l'aiuto dello script, cercheremo le classi che iniziano con utente_, e "bob" nel nostro caso sarà l'ID utente e verranno visualizzati tutti i messaggi di questo utente.

Diciamo che vorremmo anche chiedere importo massimo messaggi e salta i messaggi più vecchi di sei mesi (180 giorni):

Il nostro attributo classe si ingombra molto rapidamente: è più facile commettere un errore e l'analisi delle stringhe JavaScript diventa sempre più difficile.

Attributi dati HTML5

Fortunatamente, HTML5 ha introdotto la possibilità di utilizzare attributi personalizzati. Puoi usare qualsiasi nome in minuscolo con il prefisso dati-, Per esempio:

Attributi dati personalizzati:

• queste sono stringhe - in esse puoi memorizzare qualsiasi informazione che può essere rappresentata o codificata come una stringa, ad esempio JSON. Il typecasting deve essere eseguito utilizzando JavaScript
• dovrebbe essere utilizzato nei casi in cui non sono disponibili elementi o attributi HTML5 adatti
• fare riferimento solo alla pagina. A differenza dei microformati, dovrebbero essere ignorati. sistemi esterni, Piace motori di ricerca e robot di ricerca

Esempio JavaScript n. 1: getAttribute e setAttribute

Tutti i browser consentono di ottenere e modificare gli attributi dei dati utilizzando i metodi getAttribute e setAttribute:

Var msglist = document.getElementById ("msglist"); var show = msglist.getAttribute ("data-list-size"); msglist.setAttribute ("dimensione elenco dati", + mostra + 3);

Funziona, ma dovrebbe essere utilizzato solo per mantenere la compatibilità con i browser più vecchi.

Esempio JavaScript n. 2: metodo jQuery data()

Iniziando con Versioni jQuery 1.4.3 metodo dei dati() gestisce gli attributi dei dati HTML5. Non è necessario specificare esplicitamente il prefisso dati- quindi un codice come questo funzionerebbe:

Var lista msg = $ ("# lista msg"); var show = msglist.data ("dimensione lista"); msglist.data ("dimensione elenco", mostra + 3);

Comunque sia, tieni presente che jQuery cerca di convertire i valori di tali attributi in tipi adatti (booleani, numeri, oggetti, array o null) e influenzerà il DOM. a differenza di setAttribute, metodo dati () non sostituirà fisicamente l'attributo dimensione-elenco-dati- se controlli il suo valore al di fuori di jQuery - rimane comunque a 5.

Esempio JavaScript n. 3: API per lavorare con i set di dati

Infine, abbiamo un'API del set di dati HTML5 che restituisce un oggetto DOMStringMap. Va ricordato che gli attributi dei dati sono mappati su un oggetto senza prefissi. dati-, i trattini vengono rimossi dai nomi e i nomi stessi vengono convertiti in camelCase, ad esempio:

Il nostro nuovo codice:

Var msglist = document.getElementById ("msglist"); var show = msglist.dataset.listSize; msglist.dataset.listSize = + mostra + 3;

Questa API è supportata da tutti browser moderni ma non IE10 e versioni precedenti. C'è una soluzione per questi browser, ma è probabilmente più pratico usare jQuery se stai scrivendo per browser meno recenti.

Consentici di memorizzare informazioni aggiuntive su elementi HTML semantici standard senza altri hack come attributi non standard, proprietà extra su DOM o Node.setUserData ().

sintassi HTML

La sintassi è semplice. Qualsiasi attributo su qualsiasi elemento il cui nome di attributo inizia con data- è un attributo di dati. Diciamo che hai un articolo e tu vuoi per memorizzare alcune informazioni extra che non hanno alcuna rappresentazione visiva. Basta usare gli attributi dei dati per questo:

Accesso JavaScript

Per ottenere un attributo di dati tramite l'oggetto dataset, ottenere la proprietà dalla parte del nome dell'attributo dopo data- (notare che i trattini vengono convertiti in camelCase).

Const article = document.querySelector ("# auto elettriche"); articolo.dataset.columns // "3" articolo.dataset.indexNumber // "12314" articolo.dataset.parent // "automobili"

Ogni proprietà è una stringa e può essere letta e scritta. Nel caso precedente, l'impostazione di article.dataset.columns = 5 modificherebbe quell'attributo in "5".

Accesso CSS

Nota che, poiché gli attributi dei dati sono semplici attributi HTML, puoi anche accedervi da CSS. Ad esempio per mostrare i dati padre sull'articolo puoi utilizzare il contenuto generato in CSS con la funzione attr():

Articolo :: prima (contenuto: attr (data-parent);)

Gli attributi dei dati possono anche essere archiviati per contenere informazioni in continua evoluzione, come i punteggi in una partita. Usando i selettori CSS e l'accesso JavaScript qui, questo ti consente di creare alcuni effetti ingegnosi senza dover scrivere le tue routine di visualizzazione. Vedere questo screencast per un esempio utilizzando il contenuto generato e le transizioni CSS (esempio JSBin).

I valori dei dati sono stringhe. I valori numerici devono essere citati nel selettore affinché lo stile abbia effetto.

Problemi

Non archiviare contenuti che dovrebbero essere visibili e accessibili negli attributi dei dati, poiché la tecnologia assistiva potrebbe non accedervi. Inoltre, i crawler di ricerca potrebbero non indicizzare gli attributi dei dati "values.

Le questioni principali da considerare sono Internet Explorer supporto e prestazioni. Internet Explorer 11+ fornisce supporto per lo standard, ma tutte le versioni precedenti non supportano il set di dati. Per supportare IE 10 e versioni precedenti è necessario invece accedere agli attributi dei dati con getAttribute(). Inoltre, le prestazioni di lettura degli attributi dei dati rispetto alla memorizzazione di questi dati in un normale oggetto JS sono scarse.

HTML5 aggiunta la possibilità di memorizzare i dati direttamente in html codice. Tuttavia, questi dati non saranno visibili all'utente. Dati- * attributi ci permette di memorizzare dati aggiuntivi in ​​qualsiasi html elementi senza ingombrare i nomi delle classi.

Sitaxis HTML

La sintassi è molto semplice. Ad esempio, hai un articolo e vuoi conservarne un po' Informazioni aggiuntive che non dovrebbe essere mostrato. Usando dati- * attributi puoi farlo così:

L'esempio mostra che tutto dati- * attributi sono scritti come segue:

"Dati-" + "nome-parametro"

Accesso da JavaScript

Lettura dei dati da dati- * attributiè anche molto semplice. Possiamo usare getAttribute() leggibile, ma lo standard definisce un modo più semplice, ovvero attraverso la proprietà set di dati:

Var articolo = document.querySelector ("# auto elettriche"); var data = articolo.dataset; // data.columns -> "3" // data.indexnumber -> "12314" // data.parent -> "cars"

Il valore di ogni proprietà è una stringa, possiamo ottenere e modificare questo valore. Se scriviamo articolo.dataset.columns = 5, quindi proprietà colonne-dati cambia in 5.

Accesso CSS

A dati- * attributi possiamo accedere altrettanto facilmente tramite CSS... Ad esempio, per ottenere dati-genitore attributo articolo, puoi usare pseudo-elementi in CSS Con attr ():

Articolo :: prima (contenuto: attr (data-parent);)

Puoi anche usare i selettori in CSS cambiare gli stili in base al valore dati- *:

Articolo (larghezza: 400 px;) articolo (larghezza: 600 px;)

Puoi vedere come funziona tutto questo seguendo il link.

Attributi dei dati quindi può contenere informazioni mutevoli, come i punti nel gioco. Usando CSS selettori e accesso da JavaScript possiamo creare effetti fantastici senza scrivere codice aggiuntivo da visualizzare. Noi guardiamo video... Link al codice.

I problemi

Non memorizzare i dati in dati- * attributi da mostrare perché la tecnologia assistiva non può accedervi. inoltre robot di ricerca non indicizzare dati- * attributi.

triste ma CIOÈ non supportare set di dati... Per leggere gli attributi che devi usare getAttribute(), per modificare il valore setAttribute().

Velocità di lettura attributi-dati molto inferiore rispetto alla memorizzazione di questi dati in Js... utilizzo set di dati funziona anche più lentamente di getAttribute().