Vrijednost atributa podataka html5 php. Klase kao objekt: classList

Kao što vidite, možete odrediti bilo koja imena i bilo koje vrijednosti. Ali ovi parametri ne rade ništa s elementom, pa zašto su uopće potrebni? Postoji barem nekoliko načina za korištenje atributa podataka u izgradnji web stranice i pogledajmo ih.

Način primjene 1 – pristup elementima u css

Ako znate koji su selektori atributa, vjerovatno već možete pretpostaviti kako se nove funkcije mogu koristiti. Određivanjem jedinstvenog atributa podataka za oznaku, možete je na odgovarajući način referirati u stilovima. Pogledajmo primjer:

To nam je omogućilo pristup elementu bez korištenja stilskih klasa. Međutim, ako razmišljate o tome na ovaj način, onda to ne pruža nikakvu posebnu prednost; da biste se pozvali na klasu, morate učiniti približno iste korake. Dakle, jednostavno imate proširene mogućnosti za selektore i ništa više.

Metoda primjene 2 - pohranjivanje vrijednosti i njihovo korištenje

Na prvi pogled, vrijednosti atributa podataka ne mijenjaju ništa i uopće ne utječu na web stranicu. Pa zašto su oni uopšte potrebni? U stvari, možete im pronaći upotrebu ako se sjetite funkcije attr() u css-u.

Postavimo zadatak: trebamo prikazati tekst objašnjenja za fotografije na stranici, koji bi se pojavio ili odmah kada se slika učita, ili kada pređete preko nje, nije bitno na koji način. Standardni hint se implementira pomoću atribut naslova.

Ali takav nagovještaj vas možda neće zadovoljiti u mnogim aspektima. Prvo, izgleda glatko (što nije uvijek potrebno). Drugo, nestaje nakon nekog vremena. Treće, pojavljuje se na različitim mjestima, ovisno o tome gdje je kursor postavljen. Pa, najviše veliki problem– ne možemo ni na koji način stilizirati naš tooltip – to će uvijek biti crni tekst na bijeloj pozadini, što nije baš zanimljivo.

Dakle, iznad u kod smo ubacili sliku, naznačili put do nje i dodatno zapisali proizvoljni parametar podataka. Sada možete implementirati izlaz objašnjenja za fotografiju na ovaj način:

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

Šta smo uradili? Sada će sve slike imati pseudo element koji sadrži vrijednost atribut podataka-img, ako ga ima img tag. Na ovaj jednostavan način ste bili u mogućnosti da prikažete tekst objašnjenja za fotografiju.

U ovom članku neću dati upute o tome kako kreirati nagovještaj. Samo da kažem da će se po defaultu prikazati nakon što se stranica učita. Često je potrebno u početku sakriti i prikazati kada pređete preko slike. Da biste ovo implementirali, trebate koristiti selektor img:hover:after.

Pa, koji drugi html5 atributi postoje koji se pojavljuju samo u ovoj specifikaciji? To uključuje, na primjer, kontrole – atribut za nove audio i video elemente, koji vam omogućava da prikažete kontrole za video ili audio snimak.

Za video, koristeći parametar postera, možete odrediti putanju do slike koja će služiti kao pozadina prije nego počnete gledati video. Općenito, pojavilo se dosta ovih malih atributa.

Takođe za samca ulazni element Ima puno novih parametara. Sada možete kreirati polja za unos Email, telefon, odabir datuma ili vremena u kalendaru, polje za odabir boje itd. Prazan potreban atributčini bilo koje polje obaveznim; ako se to ne uradi, pretraživač jednostavno neće dozvoliti da se obrazac pošalje.

Naravno, jedini nedostatak svih ovih inovacija je to što nisu svugdje pravilno podržane. Dakle, dok nove funkcije rade odlično u jednom pretraživaču i korisnici mogu koristiti nova polja, stvari mogu biti drugačije u drugom web pretraživaču. Naravno, sami korisnici su dijelom krivi što nisu ažurirali softver, ali morate pratiti i šta je i kako podržano. IN

Još u danima XHTML/HTML4, programeri su imali samo nekoliko opcija koje su mogli koristiti za pohranjivanje proizvoljnih podataka vezanih za DOM. Mogli biste izmisliti svoje atribute, ali ovo je bilo rizično - vaš kod ne bi bio valjan, pretraživači bi mogli zanemariti vaše podatke i moglo bi uzrokovati probleme ako se ime podudara sa standardnim HTML atributima.

Stoga se većina programera držala atributa klase ili rel jer su oni bili jedini razuman način za pohranjivanje dodatne linije. Na primjer, recimo da kreiramo widget za prikaz poruka kao što je vremenska linija Twitter poruka. U idealnom slučaju, JavaScript bi trebao biti konfigurabilan bez potrebe za ponovnim pisanjem koda, tako da definiramo korisnički ID u atributu klase, ovako:

Naš JavaScript kodće tražiti element sa ID-om msglist. Koristeći skriptu tražit ćemo klase počevši od user_, a “bob” će u našem slučaju biti korisnički ID i prikazat ćemo sve objave tog korisnika.

Recimo i mi bismo hteli da pitamo maksimalni iznos poruke i preskočite poruke starije od šest mjeseci (180 dana):

Naš atribut klasa Vrlo brzo se zatrpava – lakše je pogriješiti, a raščlanjivanje stringova u JavaScript-u postaje sve teže.

HTML5 atributi podataka

Srećom, HTML5 je uveo mogućnost korištenja prilagođenih atributa. Možete koristiti bilo koje ime u mala slova sa prefiksom podaci-, Na primjer:

Prilagođeni atributi podataka:

• ovo su stringovi - u njih možete pohraniti bilo koju informaciju koja se može predstaviti ili kodirati kao string, kao što je JSON. Prebacivanje tipova mora biti obavljeno koristeći JavaScript
• treba koristiti u slučajevima kada nema odgovarajućih HTML5 elemenata ili atributa
• odnosi se samo na stranicu. Za razliku od mikroformata, njih treba zanemariti eksterni sistemi, tip tražilice i roboti za pretragu

Primjer obrade JavaScripta #1: getAttribute i setAttribute

Svi pretraživači vam omogućavaju da dobijete i promijenite atribute podataka koristeći metode getAttribute i setAttribute:

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

Ovo radi, ali bi se trebalo koristiti samo za održavanje kompatibilnosti sa starijim pretraživačima.

Primjer br. 2 obrade u JavaScript-u: metoda data() jQuery biblioteke

Počevši od jQuery verzije 1.4.3 metod podataka() obrađuje HTML5 atribute podataka. Ne morate eksplicitno specificirati prefiks podaci-, tako da bi kod ovako funkcionirao:

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

Međutim, imajte na umu da jQuery pokušava pretvoriti vrijednosti takvih atributa u odgovarajuće tipove (boolean, brojevi, objekti, nizovi ili null) i da će utjecati na DOM. Za razliku od setAttribute, metod podaci() neće fizički zamijeniti atribut data-list-size- ako provjerite njegovu vrijednost izvan jQueryja - i dalje će ostati jednaka 5.

Primjer br. 3 JavaScript obrade: API za rad sa skupovima podataka

Konačno, imamo API za rad sa HTML5 skupovima podataka koji vraća DOMStringMap objekat. Potrebno je zapamtiti da se atributi podataka mapiraju na objekt bez prefiksa podaci-, crtice se uklanjaju iz imena, a sama imena se pretvaraju u camelCase, na primjer:

Naš novi kod:

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

Ovaj API podržavaju svi moderni pretraživači, ali ne IE10 i niže. Za ove pretraživače postoji zaobilazno rešenje, ali je verovatno praktičnije koristiti jQuery ako pišete za starije pretraživače.

Dozvolite nam da pohranimo dodatne informacije o standardnim, semantičkim HTML elementima bez drugih hakova kao što su nestandardni atributi, dodatna svojstva na DOM-u ili Node.setUserData() .

HTML sintaksa

Sintaksa je jednostavna. Svaki atribut na bilo kojem elementu čije ime atributa počinje s data- je atribut podataka. Recimo da imate članak i ti želiš za pohranjivanje nekih dodatnih informacija koje nemaju nikakav vizualni prikaz. Za to samo koristite atribute podataka:

JavaScript pristup

Da biste dobili atribut podataka kroz objekt skupa podataka, nabavite svojstvo prema dijelu imena atributa nakon podataka- (imajte na umu da se crtice pretvaraju u camelCase).

Const article = document.querySelector("#električni-automobili"); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "automobili"

Svako svojstvo je niz i može se čitati i pisati. U gornjem slučaju postavka article.dataset.columns = 5 promijenila bi taj atribut u "5".

CSS pristup

Imajte na umu da, pošto su atributi podataka obični HTML atributi, čak im možete pristupiti iz CSS-a. Na primjer da biste prikazali roditeljske podatke o članku možete koristiti generirani sadržaj u CSS-u s funkcijom attr():

Članak::prije (sadržaj: attr(podatak-parent); )

Atributi podataka se također mogu pohraniti da sadrže informacije koje se stalno mijenjaju, kao što su rezultati u igri. Koristeći CSS selektore i JavaScript pristup ovdje, ovo vam omogućava da napravite neke sjajne efekte bez potrebe da pišete vlastite rutine prikaza. Vidi ovaj screencast za primjer koristeći generirani sadržaj i CSS prijelaze (primjer JSBin).

Vrijednosti podataka su nizovi. Brojčane vrijednosti moraju biti navedene u selektoru da bi stil stupio na snagu.

Problemi

Nemojte pohranjivati ​​sadržaj koji bi trebao biti vidljiv i dostupan u atributima podataka, jer im pomoćna tehnologija možda neće pristupiti. Osim toga, pretraživači za indeksiranje možda neće indeksirati vrijednosti atributa podataka.

Glavna pitanja koja treba razmotriti su Internet Explorer podrška i performanse. Internet Explorer 11+ pruža podršku za standard, ali sve starije verzije ne podržavaju skup podataka. Da biste podržali IE 10 i mlađi, trebate pristupiti atributima podataka pomoću getAttribute() umjesto toga. Takođe, performanse čitanja atributa podataka u poređenju sa skladištenjem ovih podataka u običnom JS objektu su loše.

HTML5 dodala mogućnost direktnog pohranjivanja podataka html kod. Međutim, ovi podaci neće biti vidljivi korisniku. Data-* atributi nam omogućava pohranjivanje dodatnih podataka u bilo koje html elemenata bez začepljenja imena klasa.

HTML sintaksa

Sintaksa je vrlo jednostavna. Na primjer, imate članak i želite ga pohraniti Dodatne informacije, što ne bi trebalo biti prikazano. Koristeći data-* atributi ti to možeš:

Iz primjera je jasno da sve data-* atributi su napisane kako slijedi:

"podaci-" + "naziv-parametar"

Pristup iz JavaScript-a

Čitanje podataka iz data-* atributi takođe vrlo jednostavno. Možemo koristiti getAttribute() za čitanje, ali prema standardu je definisan jednostavniji metod, odnosno kroz svojstvo skup podataka:

Var article = document.querySelector("#electriccars"); var data = article.dataset; // data.columns -> "3" // data.indexnumber -> "12314" // data.parent -> "automobili"

Vrijednost svakog svojstva je string, tu vrijednost možemo dobiti i promijeniti. Ako pišemo article.dataset.columns = 5, zatim vlasništvo kolone podataka promijenit će se na 5.

CSS pristup

TO data-* atributi isto tako lako možemo pristupiti CSS. Na primjer, dobiti data-parent atribut članka, možete koristiti pseudo elemente u CSS With attr():

Članak::prije (sadržaj: attr(podatak-parent); )

Također možete koristiti birače u CSS za promjenu stilova ovisno o vrijednosti podaci-*:

Članak ( širina: 400px; ) članak (širina: 600px; )

Kako to sve funkcionira možete vidjeti ako pratite link.

Atributi podataka tako može sadržavati promjenjive informacije, na primjer, bodove u igri. Koristeći CSS selektori i pristup iz JavaScript možemo kreirati cool efekti bez pisanja dodatni kod prikazati. Hajde da pogledamo video. Link do koda.

Problemi

Nemojte pohranjivati ​​podatke u data-* atributi, što se mora pokazati jer im pomoćne tehnologije ne mogu pristupiti. Osim toga roboti za pretragu nije indeksirano data-* atributi.

Tužno je ali I.E. ne podržavaju skup podataka. Za čitanje atributa morate koristiti getAttribute(), da promijenite vrijednost setAttribute().

Brzina čitanja podaci-atributi mnogo niže u poređenju sa pohranjivanjem ovih podataka u JS. Upotreba skup podataka radi čak i sporije od getAttribute().