Atribute suplimentare HTML. Cum să utilizați atributele de date HTML5

Te-ai trezit vreodată să folosești nume de clase de elemente sau atribute rel pentru a stoca fragmente arbitrare de metadate cu unicul scop de a simplifica JavaScript? Dacă ai, atunci am niște vești interesante pentru tine! Dacă nu ai făcut-o și te gândești, Uau, asta e o idee grozavă! Te implor să scapi imediat de gândul acesta și să continui să citești.

Datorită HTML 5, avem acum capacitatea de a încorpora atribute de date personalizate în toate elementele HTML. Aceste noi atribute de date personalizate constau din două părți:

Nume atribut Numele atributului de date trebuie să aibă cel puțin un caracter și trebuie să aibă prefixul „data-”. Nu trebuie să conțină litere mari. Valoarea atributului Valoarea atributului poate fi orice șir.

Folosind această sintaxă, putem adăuga date aplicației la marcajul nostru, așa cum se arată mai jos:

morcovi
Țelină
Ridichi

Acum putem folosi aceste date stocate în JavaScript-ul site-ului nostru pentru a crea o experiență de utilizator mai bogată și mai captivantă. Imaginați-vă că atunci când un utilizator face clic pe o legumă, se deschide un nou strat în browser care afișează distanța suplimentară dintre semințe și instrucțiunile de însămânțare. Datorită atributelor de date pe care le-am adăugat la noi

elemente, acum putem afișa aceste informații instantaneu, fără să ne facem griji cu privire la efectuarea de apeluri Ajax și fără a fi nevoie să facem interogări la baza de date pe server.

Prefixarea atributelor personalizate cu date asigură că acestea vor fi complet ignorate de agentul utilizator. În ceea ce privește browserul și, într-adevăr, utilizatorul final al site-ului web, aceste date nu există.

Specificația spune (sublinierea noastră):

Atributele de date personalizate sunt destinate să stocheze date personalizate private în pagină sau aplicație, pentru care nu mai există atribute sau elemente adecvate.

Aceste atribute nu sunt destinate utilizării de către software care este independent de site-ul care utilizează atributele.

Fiecare element HTML poate avea orice număr de atribute de date personalizate specificate, cu orice valoare.
specificația W3C

Cum pot folosi atributele de date?

Deoarece atributele de date personalizate sunt HTML 5 valide, ele pot fi utilizate în orice browser care acceptă tipurile de documente HTML 5. Din fericire, acestea sunt aproape toate. Pe lângă faptul că ajută la compatibilitatea inversă, acest lucru asigură, de asemenea, că atributele personalizate ale datelor vor rămâne o soluție scalabilă, multiplatformă și în viitor.

Acum că avem o înțelegere largă a atributelor datelor, să aruncăm o privire la modul în care pot fi utilizate:

Pentru a stoca înălțimea sau opacitatea inițială a unui element care ar putea fi necesară în calculele ulterioare de animație JavaScript
Pentru a stoca parametrii pentru un film Flash care este încărcat prin JavaScript
Pentru a stoca date personalizate de etichetare de analiză web, așa cum a demonstrat Jason Karns
Pentru a stoca date despre sănătatea, muniția sau viața unui element dintr-un joc JavaScript
Pentru a alimenta JavaScript accesibil

Pentru ce nu ar trebui să folosesc atributele de date?

Deși flexibile, atributele datelor nu sunt o soluție adecvată pentru toate problemele.

Atributele de date nu trebuie utilizate dacă există un atribut sau un element care este mai potrivit pentru stocarea datelor dvs. De exemplu, datele date/ora ar trebui probabil prezentate semantic într-un element de timp, în loc să fie stocate în atribute de date personalizate.
Atributele de date personalizate nu sunt destinate să concureze cu microformatele. Se precizează clar în specificație că datele nu sunt destinate să fie utilizabile public. Software-ul extern nu ar trebui să interacționeze cu acesta. Marcarea detaliilor de contact sau a detaliilor evenimentului folosind atribute de date personalizate ar fi greșită, cu excepția cazului în care, desigur, este destinată doar a fi utilizată de către al tau scripturi interne.
Prezența/absența unui anumit atribut de date nu ar trebui să fie folosită ca un cârlig CSS pentru orice stil. Acest lucru ar sugera că datele pe care le stocați sunt de importanță imediată pentru utilizator și ar trebui să fie marcate într-un mod mai semantic și mai accesibil.

Utilizarea atributelor de date cu JavaScript

Acum că înțelegem ce sunt atributele personalizate de date și când le putem folosi, probabil că ar trebui să ne uităm la modul în care putem interacționa cu ele folosind JavaScript.

Dacă dorim să recuperăm sau să actualizăm aceste atribute folosind JavaScript nativ existent, atunci putem face acest lucru folosind metodele getAttribute și setAttribute, așa cum se arată mai jos:

Această metodă va funcționa în toate browserele moderne, dar nu este modul în care sunt destinate să fie utilizate atributele de date. A doua modalitate (nouă și îmbunătățită) de a realiza același lucru este accesarea proprietății setului de date a unui element. Această proprietate de set de date - parte a noilor API-uri HTML 5 JavaScript - va returna un obiect DOMStringMap cu toate atributele de date ale elementului selectat. Când utilizați această abordare, în loc să utilizați numele complet al atributului, puteți renunța la prefixul de date. și consultați datele personalizate direct folosind numele pe care i l-ați atribuit.

Dacă, la un moment dat în scriptul dvs., un anumit atribut de date devine redundant și nu mai este necesar, este, de asemenea, posibil să eliminați complet acel atribut din elementul DOM setându-l la o valoare null .

plant.dataset.leaves = null; // Omizile atacă!

Din păcate, noua proprietate de set de date nu a fost încă implementată în niciun browser, așa că, între timp, este mai bine să utilizați getAttribute și setAttribute, așa cum sa demonstrat mai devreme.

În timpul dezvoltării aplicației, s-ar putea să vă fie util să puteți selecta elemente pe baza prezenței - sau chiar a valorilor specifice ale - atributelor lor personalizate de date. Acest lucru poate fi realizat rapid și ușor folosind querySelectorAll, așa cum se arată mai jos:

// Selectați toate elementele cu un atribut "data-flowering" document.querySelectorAll(""); // Selectați toate elementele cu frunze roșii document.querySelectorAll("");

Un cuvânt de avertisment

Pe măsură ce atributele datelor devin mai utilizate pe scară largă, potențialul de ciocniri în convențiile de denumire devine mult mai mare. Dacă utilizați un nume de atribut lipsit de imaginație, cum ar fi data-height , atunci este posibil să întâlniți în cele din urmă o bibliotecă sau un plugin care utilizează același nume de atribut. Mai multe scripturi obținerea și setarea unui atribut de date comun va cauza probabil haos. Pentru a evita acest lucru, îi încurajez pe oameni să aleagă un șir standard (poate numele site-ului/plugin-ului) pentru a prefix toate atributele de date - de ex. data-html5doctor-height sau data-my-plugin-height .

rezumat

Atributele personalizate de date sunt o modalitate excelentă de a simplifica stocarea datelor aplicației în paginile dvs. web. Deși nu puteți utiliza încă noile API JavaScript, vă puteți bucura de un mare succes utilizând getAttribute și setAttribute în siguranță, știind că vor funcționa în toate browserele majore.

temă pentru acasă

Dacă sunteți foarte dornici să jucați cu noua proprietate a setului de date, dar sunteți dezamăgit că nu a fost implementat, nu vă temeți!, deoarece există o lumină la capătul tunelului. Ați putea fi interesat să vă uitați la codul experimental al Dr. Remy , care activează parțial funcționalitatea setului de date în unele browsere prin editarea Element.prototype .

Codul acceptă regăsirea atributelor de date în cele mai recente versiuni de Firefox, Safari, Opera și Chrome, dar, din păcate, nu va funcționa în nicio versiune de IE (deoarece IE nu expune obiectul Element). De asemenea, acest cod acceptă parțial setarea atributelor de date, dar va stoca doar noile valori ale atributelor în JavaScript și nu va actualiza elementul DOM așa cum ar face o implementare completă, nativă a proprietății setului de date. Deși acest cod este în principal o dovadă a conceptului, poate fi util pentru dezvoltarea de aplicații mobile sau intranet în medii închise în care compatibilitatea între browsere (IE) nu este o problemă.

Categorie

45 de răspunsuri la articolul „Atribute de date personalizate HTML5 (date-*)”

Nu văd cu fermitate de ce este inadecvat să folosiți atribute de date personalizate pentru aplicații externe, cu condiția ca aceste aplicații externe să nu fie o cerință pentru vizualizarea paginii.

Nu înțeleg de ce acest articol citează partea din specificație care spune că atributele data-* sunt specifice site-ului și apoi dă un avertisment care promovează spațiarea numelor. Dacă urmați specificațiile, creați toate a numelor atributelor, deci nu există niciun motiv pentru spațiul de nume. Exact asta De ce asta e in specificatii.

@Scott – spația de nume nu este pentru a crea atribute de date „specifice site-ului”, ci spația de nume în aplicație.

De exemplu (și specificațiile IIRC menționează acest lucru) controalele unui widget (cum ar fi o vizualizare arborescentă) pot avea atribute de date, dar atributele de date pot fi create folosind o anumită bibliotecă, cum ar fi jQuery sau Dojo - astfel încât pentru a evita coliziunile atributelor de date, modulul de aplicație poate dori să-l creeze un spațiu de nume.

Nu pot vedea unde s-a referit Chris la atributul de date specific site-ului (dar este târziu și poate că l-am ratat).

Există o mulțime de cazuri în care nu veți dori sau nu trebuie să utilizați spațiarea numelor, dar există unele cazuri în care are sens. Dar, deoarece acest lucru se bazează doar pe regulile existente privind atributele conținutului, sunteți liber să decideți cum le folosiți.

Folosesc data-* cu getAttribute și setAttribute de când am văzut o postare despre asta acum 2 ani de Jon Resig, așa că pot confirma că acest mod de utilizare funcționează pentru toate browserele/platformele, începând cu IE6.
Sper doar că orice browser care implementează data-* în mod nativ nu va rupe metoda getAttribute (nu ar trebui, dar nu știm niciodată)

Din punct de vedere al performanței, accesarea DOM-ului prin getAttribute() este evident mai lentă decât accesarea la o variabilă JS, eveniment stocat într-o matrice, așa că cazul de utilizare pe care îl oferiți unui joc JS folosindu-l pentru a stoca valori probabil nu va se întâmplă: dezvoltatorii îl vor folosi pentru a transmite informații de la server la client, dar odată ce DOM-ul a fost recoltat, cel mai bine este să păstrați toate valorile în JS pentru un acces mai rapid

@jpvincent – Da, sunt total de acord cu tine.

Bănuiesc că datele inițiale de sănătate și muniție ar putea fi stocate într-o bază de date și utilizarea unui atribut de date ar fi un mecanism valid pentru a transfera aceste informații în javascript-ul jocului. Dar odată ce această sarcină de inițializare este finalizată, nu mai are rost să continuați să faceți actualizări DOM costisitoare cu cele mai recente statistici de sănătate/muniție.

Multumesc pentru comentariul tau.

Articolul dvs. menționează că nu ar trebui să utilizați data-* pentru cârlige CSS. Ce se întâmplă dacă atributul data-* a fost folosit în JS, dar ați fi vrut să-i aplicați stiluri. Nu ar avea sens să vizați atributul în loc să adăugați o clasă secundară.

Luați această formă de exemplu:

data-field_type="text" ar putea fi folosit atât pentru validare, cât și pentru aspectul stilului.

Funcție destul de grozavă, deși niciun browser nu o acceptă încă. Acest mic cod funcționează pentru a adăuga suport pentru proprietatea setului de date la orice browser care acceptă __defineGetter__. L-am scris înainte de a realiza că ai legat un cod care face cam același lucru. Codul meu, pe de altă parte, are suport pentru actualizarea efectivă a valorilor atributelor, dar nu acceptă adăugarea de noi atribute.

Element.prototype.__defineGetter__('set de date', function()(
var dataset = ();
pentru (var i=0, l=this.attributes.length; i varattr = this.attributes[i];
if (attr.name && attr.name.indexOf("date-") == 0) (
var el = this, name = new String(attr.name), key = name.substring(5).replace(/-()/ig, function (a, b) ( return b.toUpperCase(); ));
set de date.__defineGetter__(key, function()( return el.getAttribute(nume); ));
set de date.__defineSetter__(cheie, funcție(valoare)( el.setAttribute(nume, valoare); ));
}
}
returnează setul de date;
});

Datele-* cu siguranță vor fi utile, dar acel exemplu de morcov nu este un exemplu grozav. Veți folosi datele din atributele data-* pentru, nu pentru afișarea conținutului. După cum spuneți, „Se precizează clar în specificații că datele nu sunt destinate să fie utilizabile public”

In loc de asta:

morcovi

Ar trebui să includeți conținutul în text HTML real, nu în atributele dvs. În acest fel, datele dumneavoastră sunt indexate în motoarele de căutare, accesibile mașinilor într-un format care poate fi citit etc. Dacă aș avea gt și lt corect, ar fi ceva de genul:

morcovi Distanță: 10 cm. Timp de semănat: martie până în iunie

Părerea mea este că, dacă creați clase care nu vor fi niciodată stilizate sau stocați variabile în câmpuri de formular ascunse care nu sunt citite niciodată de pe server, acestea sunt ambele cazuri bune de utilizare pentru atributul de date.

Cu toate acestea, ar trebui să vă întrebați: „Voi dori vreodată să modelez aceste informații sau să creez feedback de la utilizatori pe baza acestor date?”

Dacă răspunsul este da, atunci datele sunt o abordare greșită.

Mulțumesc pentru explicația atributelor datelor. Microsoft intenționează să încorporeze atribute de date HTML în următoarea versiune a formularelor web ASP.NET în controalele validatoarelor lor, iar articolul dvs. m-a ajutat foarte mult când încercam să mă pricep la toate...!

Dar proprietățile expando? Atributele de date mi se par ca un hash spațial de nume (cu „date-”) de proprietăți expando, cu un plus de confort pentru setul de date. Cum se compară următoarele?

plant.setAttribute('data-fruit','7');

plantă.fruct = 7;

În general, tocmai am stocat date legate de element în memorie într-un hash sau obiect care poate fi preluat pe baza ID-ului elementului.

Am găsit un caz în care consider că utilizarea atributelor data-* pentru cârlige CSS este validă. Feedback-ul este, desigur, binevenit.

Am un tabel HTML de date care poate fi sortat, crescător și descendent, cu AJAX făcând clic pe anteturile coloanei. Am optat să folosesc un atribut data-sort-dir="asc" pe antetul coloanei nu numai pentru a spune apelului AJAX în ce direcție să sorteze cererea, ci și pentru a crea o săgeată lângă antetul coloanei care indică direcția în care săgeata indică. .

A(
/* Afișează săgeata ascendentă */
}

A(
/* Afișează săgeata descendentă */
}

Când se face clic pe un antet de coloană, atributul data-sort-dir este actualizat sau mutat pentru a reflecta corect în ce direcție este sortată.

De asemenea, sunt de acord că exemplul de morcov a fost un exemplu slab, deoarece stocați date pentru a le afișa utilizatorului într-o altă metodă care a fost declarată contrară specificațiilor. În acest caz, opțiunea de element ascuns pe care David R a prezentat-o în comentarii sau utilizarea atributului titlu probabil ar fi fost mai bună.

@Andres - data-* este doar pentru stocarea datelor care urmează să fie utilizate pe propriul site web. Deoarece scopul principal al rolurilor ARIA este acela de a comunica browserului/cititorului de ecran o structură suplimentară a paginii, acesta nu ar fi un moment potrivit pentru a le folosi. Rămâi cu rol=”principal”.

Folosesc foarte mult atributele de date pentru aplicațiile jQuery. Acest atribut vă permite să stocați date private pentru aplicația dvs. Dacă intenționați ca datele să fie înțelese de motoarele de căutare, puteți utiliza microdate care sunt mai semantice.

Atributele de date ar fi potrivite pentru ceva precum comutarea atributului src al unui „ între o versiune de înaltă rezoluție și o versiune de rezoluție redusă (pentru o mai bună performanță a designului receptiv)? (Ceva de genul)

De asemenea, care este cel mai bun mod de a testa suportul pentru acest lucru?

„Mulțumită HTML5, avem acum capacitatea de a încorpora atribute de date personalizate în toate elementele HTML[!!11!!1!1!]”

Wow, cum ar fi proprietățile expando disponibile din IE4? Mulțumesc HTML5, ești cel mai bun!

Bine, presupunând că „setul de date” oferă o colecție de valori pentru mai multe elemente, este util (deși deja banal prin jQuery) .. dar acest articol miroase a amnezie a caracteristicilor.

cu siguranță stilul la data-* are sens într-o aplicație web bogată în date, mai degrabă decât balonarea atributului de clasă?

în pseudocod interfață cu datele ca interfață utilizator: eliminați clasa X
adăugați clasa Y
ca un feedback asupra și ca urmare a unei acțiuni a utilizatorului

vs modificați datele-* în Y

nu că privirea la DOM-ul de bază este critică pentru utilizatorul final, dar completarea clasei cu date non-ierarhice DE DRUM STYLING pare mai greșită decât stilizarea datelor care sunt de asemenea păstrate???

Au implementat vreun browser algoritmul de ștergere a setului de date? Făcând `plant.dataset.leaves = null` în Chrome, nu se elimină atributul. Îl convertește în textul „null”. Asta e in specificatii? și când este preluat folosind jquery
$('div').data('număr lung')
returnează o valoare exponențială (1,1111111111111112e+209)
Care va fi problema?
Există vreo soluție pentru asta?

Există vreun ghid pentru consumul RDFa în XHTML5?
După înțelegerea mea limitată, DOCTYPE este ignorat în aceste fișiere, atributul versiune este depreciat. eu folosesc în eticheta capului.

Din moment ce vorbim de scripting și deci de DOM
setAttribute a fost specificat ca fiind capabil de la DOM Core 1.0 să seteze atribute definite de utilizator și nu există probleme de implementare.

Cu toate acestea, aceia dintre noi care scriu documente xml, inclusiv documente htmlN.., folosesc de obicei o referință la obiecte la elemente și stochează acolo variabile definite de utilizator, deoarece acestea sunt mai rapide pentru a accesa și aborda orice nevoie de scripting:

var a=elobj['elementid'].user_defined_attribute;

var a=element.getAttribute(user_defined_attribute);

și poate răspunde oricărei necesități de scriptare pe care datele-* sau orice altă caracteristică de scriptare a limbajului de marcare pretinde că o introduce sau o oferă.

Sunt un programator profesionist și acum trec la html5 și la crearea de aplicații...

Până acum, e bine, dar am o mică problemă pe care nu o pot rezolva.

Vreau pur și simplu:

citește un fișier text de la distanță pe serverul meu
citiți fișierul pe rând
magazin local pe perechi

punct... simplu nu? Ei bine, am găsit aproximativ 20 de răspunsuri diferite online, niciunul nu funcționează.

Unde pot găsi un răspuns REAL?

Cum fac creatorii de jocuri pentru a încărca un dicționar de cuvinte, de exemplu, pe un dispozitiv mobil în perechi?

Încep cu HTML5 și adevărul este că nu cunoșteam această etichetă. Se pare că este foarte ultil, studiez-l temeinic pentru a-l folosi în următoarele proiecte.

Am observat acest tip de domenii când am avut de-a face cu proiecte Rails, dar nu am găsit timp să investighez acest lucru în acest moment. Mă bucur că am făcut-o astăzi, mulțumesc pentru acest articol cu adevărat util.

Proprietățile de extindere și atributele „data-*” nu sunt chiar același lucru.

daca cineva scrie:

Cum pot ști validatorii/motoarele că autorul nu a vrut să scrie

Cu atributele „date-*”, este posibil să cunoașteți intenția autorului.

Daca cineva scrie:

Probabil a vrut să spună.

Așa a greșit Microsoft și continuă să fie.
Desigur, proprietățile expando au fost o idee bună (din punctul de vedere al implementării, înseamnă că este nevoie de MĂRINA validare), dar nu la fel de bună decât necesitatea prefixului „date-”.

De asemenea, imaginați-vă decât în HTML6, div-urile pot lua un atribut „src” pentru a încărca conținut asincron. (De exemplu, redați ceva complex, așa că doriți ca utilizatorul să nu aștepte în fața unei pagini goale)
Fără atributul „date-”, nu vă puteți schimba pur și simplu doctype la „html6”, ci îngreunează migrarea.

Cu atributul „data-*” sunteți sigur că site-ul dvs. html nu va fi spart, deoarece specificația a adăugat un nou atribut.

Bună ziua, folosesc atributul de date personalizat pentru a încărca conținutul postărilor cu JavaScript fără o interogare Ajax.

încărcați conținut

greșesc dacă pun conținut html în atributul de date? va rog am aceasta indoiala

ar putea fi o problemă de SEO??

utilizarea/stocarea valorilor datelor în marcajul html nu este un design prost?
Deci, dacă luăm în considerare lucruri precum principiul responsabilității unice (nu ca un model de design care este, ci ca un cuvânt de înțelepciune), nu ne încurcăm cu ceea ce este conceput HTML-ul???

Există vreo instrucțiune pentru consumul RDFa în XHTML5?
După înțelegerea mea limitată, DOCTYPE este ignorat în aceste fișiere, atributul versiune este depreciat. Folosesc eticheta din interior.
Atributul de proprietate este folosit de licența creative commons pe care o plasez la subsolul fișierului.

Cu mult timp în urmă, în zilele XHTML/HTML4, dezvoltatorii aveau doar câteva opțiuni pe care le puteau folosi pentru a stoca date arbitrare legate de DOM. Ai putea să-ți inventezi propriile atribute, dar asta era riscant - codul tău nu ar fi valid, browserele ar putea să-ți ignore datele, iar acest lucru ar putea cauza probleme dacă numele se potrivește cu atributele HTML standard.

De aceea, majoritatea dezvoltatorilor au rămas cu atributele class sau rel, deoarece acestea erau singura modalitate rezonabilă de a stoca șiruri suplimentare. De exemplu, să presupunem că construim un widget pentru a afișa mesaje, cum ar fi o cronologie Twitter. În mod ideal, JavaScript ar trebui să fie configurabil fără a fi nevoie să rescriem codul, așa că definim ID-ul utilizatorului în atributul de clasă, astfel:

Codul nostru JavaScript va căuta un element cu un ID msglist. Cu ajutorul scenariului vom căuta clase începând cu utilizator_, iar „bob” în cazul nostru va fi ID-ul utilizatorului și vom afișa toate postările acestui utilizator.

Să presupunem că am dori, de asemenea, să setăm un număr maxim de mesaje și să omitem mesajele mai vechi de șase luni (180 de zile):

Atributul nostru clasă devine aglomerat foarte repede - este mai ușor să faceți o greșeală, iar analizarea șirurilor în JavaScript devine din ce în ce mai dificilă.

Atribute de date HTML5

Din fericire, HTML5 a introdus capacitatea de a utiliza atribute personalizate. Puteți folosi orice nume cu minuscule cu un prefix date-, de exemplu:

Atribute personalizate de date:

sunt șiruri de caractere - în ele puteți stoca orice informație care poate fi reprezentată sau codificată ca șir, cum ar fi JSON. Castarea tipului trebuie făcută cu JavaScript
ar trebui utilizat în cazurile în care nu există elemente sau atribute HTML5 adecvate
referiti doar la pagina. Spre deosebire de microformate, acestea ar trebui ignorate de sistemele externe, cum ar fi motoarele de căutare și crawlerele.

Procesarea JavaScript Exemplul #1: getAttribute și setAttribute

Toate browserele vă permit să obțineți și să modificați atributele de date folosind metodele getAttribute și setAttribute:

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

Acest lucru funcționează, dar ar trebui folosit doar pentru a menține compatibilitatea cu browserele mai vechi.

Exemplul de procesare JavaScript #2: metoda jQuery data().

Începând cu jQuery 1.4.3, metoda data() gestionează atributele de date HTML5. Nu trebuie să specificați în mod explicit prefixul date- deci un cod ca acesta ar funcționa:

Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("dimensiunea listei", show+3);

Dar oricum ar fi, rețineți că jQuery încearcă să convertească valorile unor astfel de atribute în tipurile adecvate (boolean, numere, obiecte, matrice sau nul) și va afecta DOM-ul. Spre deosebire de setAttribute, metoda date() nu va înlocui fizic atributul dimensiunea listei de date- dacă îi verificați valoarea în afara jQuery - va fi totuși 5.

Exemplul de procesare JavaScript nr. 3: API pentru lucrul cu seturi de date

Și, în sfârșit, avem API-ul setului de date HTML5, care returnează un obiect DOMStringMap. Trebuie reținut că atributele datelor sunt mapate la un obiect fără prefixe date-, cratimele sunt eliminate din nume, iar numele în sine sunt convertite în camelCase, de exemplu:

Numele atributului	Nume în setul de date API
utilizator de date	utilizator
data-maxage	maxage
dimensiunea listei de date	listSize

Noul nostru cod:

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

Acest API este acceptat de toate browserele moderne, dar nu de IE10 și de mai jos. Există o soluție pentru astfel de browsere, dar probabil că este mai practic să utilizați jQuery dacă scrieți pentru browsere mai vechi.

Vlad Merjevici

HTML 4 nu avea capacitatea de a crea propriile atribute pentru a stoca valori. De ce este necesar? Iată câteva sarcini în care ar putea fi nevoie.

Creați sfaturi cu instrumente fără a utiliza scripturi.
Determinarea stilului unui element pe baza valorii unui atribut.
Obținerea și modificarea valorilor prin scripturi.

HTML5 are un nou atribut generic care poate fi adăugat la orice etichetă. Regulile pentru scrierea unui atribut sunt simple:

începe întotdeauna cu date-;
folosim numai litere latine, cratima (-), două puncte (:) și liniuță (_).

CSS și JavaScript gestionează aceste atribute puțin diferit, așa că haideți să vedem exemple pentru ele separat.

css

În CSS, există atribute de etichetă, dacă există vreun atribut sau o valoare dată, setăm stilul necesar.

Conţinut

Acum ne putem referi la acest element ca un div în stiluri și putem stabili aspectul dorit pentru el. În general, acest lucru este similar cu modul în care funcționează clasele, deci nu este un fel de caracteristică unică sau necesară. Deci este mai util să setați valori.

Conţinut

În CSS, după aceea putem seta un stil diferit pentru diferite valori ale atributului nostru de coloane de date.

Div ( lățime: 480px; ) div ( lățime: 720px; )

Din nou, acesta este într-o oarecare măsură un înlocuitor pentru clase, deoarece nimic nu ne împiedică să facem clase numite coloana-2, coloana-3 și să le adăugăm dacă este necesar.

Un caz de utilizare mai elegant este includerea funcției attr(). Obține valoarea atributului dat și o inserează în stil. Acest lucru este util pentru crearea de sfaturi cu instrumente. Scriem textul chiar în interiorul elementului și implementăm afișarea și designul tooltipului folosind CSS.

Balon cu instrumente

Temperatura apei

În acest exemplu, elementul este adăugat atributul data-description care conține textul necesar pentru ieșire. Afișarea în sine are loc folosind pseudo-elementul ::after și proprietatea conținut, a cărei valoare este funcția attr().

JavaScript

Dacă în CSS ne referim direct la numele atributului, specificându-l integral, atunci în JavaScript acest lucru se face prin metoda set de date. Numele atributului în sine este convertit într-o variabilă conform următoarelor reguli:

date- aruncate;
orice cratima dinaintea literei este aruncată, iar litera care urmează este scrisă cu majuscule.

În practică, arată așa.

descrierea datelor devine descriere.
data-full-description devine fullDescription.
data-description-of-tag devine descriptionOfTag.

Modul tradițional de a accesa un element și atributele acestuia este de a da un ID și de a accesa elementul prin getElementById , așa cum se arată în exemplul de mai jos.

set de date

Utilizator

Mai întâi, adăugăm elementului un identificator cu o valoare unică. Apoi accesăm elementul prin getElementById . Acum putem accesa orice atribut de date prin metoda setului de date și nu numai să obținem, ci și să setăm valori. Acestea vor fi stocate până când pagina este reîncărcată sau până când este setată o nouă valoare.

Permiteți-ne să stocăm informații suplimentare despre elemente HTML standard, semantice, fără alte hack-uri, cum ar fi atribute non-standard, proprietăți suplimentare pe DOM sau Node.setUserData() .

Sintaxa HTML

Sintaxa este simplă. Orice atribut al oricărui element al cărui nume de atribut începe cu data- este un atribut de date. Să presupunem că aveți un articol și doriți să stocați informații suplimentare care nu au nicio reprezentare vizuală. Utilizați doar atributele de date pentru asta:

...

Acces JavaScript

Pentru a obține un atribut de date prin obiectul set de date, obțineți proprietatea după partea din numele atributului după data- (rețineți că liniuțele sunt convertite în camelCase).

Const article = document.querySelector("#electric-cars"); article.dataset.columns // „3” article.dataset.indexNumber // „12314” article.dataset.parent // „mașini”

Fiecare proprietate este un șir și poate fi citită și scrisă. În cazul de mai sus, setarea article.dataset.columns = 5 ar schimba acel atribut la „5” .

acces CSS

Rețineți că, deoarece atributele de date sunt atribute HTML simple, le puteți accesa chiar și din CSS . De exemplu, pentru a afișa datele părinte de pe articol, puteți utiliza conținutul generat în CSS cu funcția attr():

Articolul::before ( conținut: attr(data-parent); )

Atributele datelor pot fi, de asemenea, stocate pentru a conține informații care se schimbă constant, cum ar fi scorurile într-un joc. Folosind selectoarele CSS și accesul JavaScript aici, acest lucru vă permite să construiți niște efecte ingenioase fără a fi nevoie să vă scrieți propriile rutine de afișare. Vedea acest screencast de exemplu folosind conținutul generat și tranzițiile CSS (exemplu JSBin).

Valorile datelor sunt șiruri. Valorile numerice trebuie să fie cotate în selector pentru ca stilul să aibă efect.

Probleme

Nu stocați conținut care ar trebui să fie vizibil și accesibil în atributele datelor, deoarece este posibil ca tehnologia de asistență să nu le acceseze. În plus, crawlerele de căutare nu pot indexa valorile atributelor de date.

Principalele probleme de luat în considerare sunt suportul și performanța Internet Explorer. Internet Explorer 11+ oferă suport pentru standard, dar toate versiunile anterioare nu acceptă setul de date . Pentru a suporta IE 10 sau mai puțin, trebuie să accesați atributele de date cu getAttribute(). De asemenea, performanța citirii atributelor de date în comparație cu stocarea acestor date într-un obiect JS obișnuit este slabă.

Vă permite să vă creați propriile atribute pentru a stoca informații arbitrare. Datele pot fi preluate prin scripturi sau prin funcția de stil attr().

Numele atributului trebuie să înceapă neapărat cu data-, apoi puteți folosi litere latine mici, cifre și următoarele caractere: cratima (-), două puncte (:), liniuță de subliniere (_).

Numele atributelor sunt transformate în variabile, care pot fi accesate ulterior și valorile obținute, conform următoarelor reguli:

date- este eliminată;
orice cratima dinaintea literei este eliminată, iar litera de după aceasta este scrisă cu majuscule;
orice alte litere rămân neschimbate.

De exemplu, atributul data-date-of-birth este convertit în variabila dateOfBirth.

Pentru a accesa atribute și a obține valorile acestora prin scripturi, se folosește metoda setului de date. De asemenea, este folosit pentru a seta o nouă valoare.

sens = element.set de date. atribut element.set de date. atribut = sens

Aici, numele atributului este o variabilă obținută prin modificarea atributului conform regulilor de mai sus (dateOfBirth, nu data-data-of-birth sau data-of-birth).

Exemplu

date-*