html5 vrijednost atributa php podataka. Klase kao objekt: classList

Kao što vidite, možete odrediti bilo koje nazive i bilo koje vrijednosti. Ali ti 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.

Upotreba 1 - referenciranje elemenata u css-u

Ako znate što su selektori atributa, već možete pretpostaviti kako se nove značajke 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 da se referiramo na element bez korištenja stilskih klasa. Međutim, ako razmislite o tome, onda to ne daje nikakvu posebnu prednost; da biste pristupili razredu, trebate učiniti približno iste korake. Tako jednostavno proširujete mogućnosti selektora i ništa više.

Slučaj upotrebe 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 uopće potrebni? Zapravo, možete im pronaći upotrebu ako se sjetite funkcije attr () u css-u.

Postavimo zadatak: trebate prikazati tekst objašnjenja za fotografije na stranici, koji bi se pojavio ili odmah s učitavanjem slike, ili kada pređete preko nje, bez obzira na to kako. Standardni prompt implementiran je pomoću atribut naslova.

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

Dakle, gore u kodu smo umetnuli sliku, naznačili put do nje i dodatno zabilježili proizvoljni parametar podataka. Sada možete implementirati izlaz objašnjenja za fotografiju na sljedeći način:

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

Što smo učinili? Sada će sve slike imati pseudo element koji će sadržavati vrijednost atribut podataka-img ako je dostupno img oznaka. Na tako jednostavan način uspjeli ste prikazati tekst objašnjenja za fotografiju.

U ovom članku neću davati upute o tome kako dati savjet. Reći ću samo da će se prema zadanim postavkama prikazati nakon što se stranica učita. Često ga je potrebno u početku sakriti i prikazati kada se lebdi iznad slike. Da biste to implementirali, trebate koristiti selektor img:hover:after.

Pa, koji su drugi html5 atributi koji su se pojavili samo u ovoj specifikaciji? To uključuje, na primjer, kontrole - atribut za nove audio i video elemente, koji vam omogućuje prikaz kontrola za video ili audio zapis.

Za video, pomoću parametra postera, možete odrediti put do slike koja će biti pozadina prije početka videozapisa. Općenito, nije tako malo tako malih atributa.

Također u samcu ulazni element ima puno novih opcija. Sada možete kreirati polja za unos E-mail, telefon, odabir datuma ili vremena u kalendaru, polje za odabir boje itd. Prazan traženi atributčini bilo koje polje koje je potrebno ispuniti, ako se to ne učini, preglednik jednostavno neće preskočiti slanje obrasca.

Naravno, jedini nedostatak svih ovih inovacija je što nisu svugdje pravilno podržane. Dakle, ako nove značajke rade izvrsno u jednom pregledniku i korisnici mogu koristiti nova polja, možda neće biti isto u drugom web pregledniku. Naravno, sami korisnici su dijelom krivi što nisu ažurirali softver, ali također morate pratiti što je i kako podržano. V

Davno, u vrijeme XHTML/HTML4, programeri su imali samo nekoliko opcija koje su mogli koristiti za pohranu proizvoljnih podataka povezanih s DOM-om. Mogli biste izmisliti vlastite atribute, ali to je bilo riskantno - vaš kôd ne bi bio valjan, preglednici bi mogli zanemariti vaše podatke, a to bi moglo uzrokovati probleme ako se naziv podudara sa standardnim HTML atributima.

Stoga se većina programera oslanjala na atribute klase ili rel, jer su oni bili jedini razuman način pohrane dodatne linije. Na primjer, recimo da gradimo widget za prikaz poruka kao što je vremenska traka na Twitteru. U idealnom slučaju, JavaScript bi se trebao konfigurirati bez potrebe za ponovnim pisanjem koda, tako da definiramo korisnički ID u atributu klase, ovako:

Naše JavaScript kodće tražiti element s ID-om msglist. Uz pomoć skripte tražit ćemo nastavu počevši od korisnik_, a "bob" će u našem slučaju biti korisnički ID, a mi ćemo prikazati sve objave ovog korisnika.

Recimo i mi bismo htjeli pitati maksimalni iznos poruke i preskočiti poruke starije od šest mjeseci (180 dana):

Naš atribut razreda se vrlo brzo zatrpa - lakše je pogriješiti, a raščlanjivanje nizova u JavaScriptu 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 s prefiksom podaci-, Na primjer:

Prilagođeni atributi podataka:

• oni su stringovi - u njih možete pohraniti sve informacije koje se mogu predstaviti ili kodirati kao string, kao što je JSON. Liječenje tipa mora se obaviti s JavaScriptom
• treba koristiti u slučajevima kada nema odgovarajućih HTML5 elemenata ili atributa
• odnosi se samo na stranicu. Za razliku od mikroformata, treba ih zanemariti. vanjski sustavi, tip tražilice i roboti za pretraživanje

Primjer obrade JavaScripta #1: getAttribute i setAttribute

Svi preglednici omogućuju dobivanje i promjenu atributa podataka pomoću metoda getAttribute i setAttribute:

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

Ovo funkcionira, ali se treba koristiti samo za održavanje kompatibilnosti sa starijim preglednicima.

Primjer obrade JavaScript #2: metoda jQuery data().

Počevši od jQuery verzije 1.4.3 podatkovna metoda() obrađuje HTML5 atribute podataka. Ne morate eksplicitno navesti prefiks podaci- pa bi kod ovako funkcionirao:

Var msglist = $("#msglist"); var show = msglist.data("list-size"); msglist.data("veličina liste", prikaži+3);

No, kako god bilo, 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, metoda podaci() neće fizički zamijeniti atribut veličina popisa podataka- ako provjerite njegovu vrijednost izvan jQueryja - i dalje će biti 5.

Primjer obrade JavaScripta #3: API za rad sa skupovima podataka

I konačno, imamo API skupa podataka HTML5, koji vraća objekt DOMStringMap. Treba imati na umu da se atributi podataka preslikavaju na objekt bez prefiksa podaci-, crtice se uklanjaju iz imena, a sami nazivi se pretvaraju u camelCase, na primjer:

Naš novi kod:

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

Ovaj API podržavaju svi moderni preglednici, ali ne IE10 i niže. Za takve preglednike postoji zaobilazno rješenje, ali vjerojatno je praktičnije koristiti jQuery ako pišete za starije preglednike.

Omogućite nam pohranjivanje dodatnih informacija 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š pohraniti neke dodatne informacije koje nemaju vizualni prikaz. Za to samo upotrijebite atribute podataka:

JavaScript pristup

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

Konst članak = 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, budući da su atributi podataka obični HTML atributi, čak im možete pristupiti iz CSS-a. Na primjer, za prikaz nadređenih podataka o članku možete koristiti generirani sadržaj u CSS-u s funkcijom attr():

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

Atributi podataka također se mogu pohraniti kako bi sadržavali informacije koje se stalno mijenjaju, poput rezultata u igri. Korištenje CSS selektora i pristupa JavaScriptu ovdje vam omogućuje da napravite neke zgodne efekte bez potrebe za pisanjem vlastitih rutina prikaza. Vidjeti ovaj screencast za primjer koji koristi 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, alati za indeksiranje možda neće indeksirati vrijednosti atributa podataka.

Glavna pitanja koja treba razmotriti su Internet Explorer podrška i izvedba. 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, umjesto toga trebate pristupiti atributima podataka pomoću getAttribute(). Također, izvedba čitanja atributa podataka u usporedbi sa pohranjivanjem ovih podataka u običan JS objekt je loša.

HTML5 dodana mogućnost izravnog pohranjivanja podataka html kodirati. Međutim, ti podaci neće biti vidljivi korisniku. Podaci-* atributi omogućuje nam pohranjivanje dodatnih podataka u bilo koji html elemenata bez zagađivanja naziva klasa.

HTML sintaksa

Sintaksa je vrlo jednostavna. Na primjer, imate članak i želite ga pohraniti Dodatne informacije, što ne bi trebalo biti prikazano. Korištenje data-* atributi može se učiniti ovako:

Iz primjera se vidi da su svi data-* atributi napisani su kako slijedi:

"podaci-" + "naziv-parametar"

Pristup iz JavaScripta

Čitanje podataka iz data-* atributi također vrlo jednostavno. Možemo koristiti getAttribute() za čitanje, ali standard definira jednostavniji način, naime kroz svojstvo skup podataka:

var article = document.querySelector("#electriccars"); vardata = članak.skup podataka; // data.columns -> "3" // data.indexnumber -> "12314" // data.parent -> "cars"

Vrijednost svakog svojstva je niz, tu vrijednost možemo dobiti i promijeniti. Ako napišemo article.dataset.columns = 5, zatim vlasništvo stupci podataka promijenit će se u 5.

CSS pristup

DO data-* atributi isto tako lako možemo pristupiti css. Na primjer, dobiti podaci-roditelj atribut članka, možete koristiti pseudoelemente u css S attr():

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

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

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

Kako sve funkcionira možete vidjeti na linku.

atributi podataka tako može sadržavati promjenjive informacije, kao što su rezultati u igri. Korištenje css selektori i pristup iz JavaScript možemo stvarati cool efekti bez pisanja dodatni kod prikazati. Mi gledamo video. Veza na kod.

Problemi

Nemojte pohranjivati ​​podatke u data-* atributi, koji bi trebao biti prikazan jer im pomoćne tehnologije ne mogu pristupiti. osim roboti za pretraživanje nije indeksirano data-* atributi.

Tužno ali tj ne podržavaju skup podataka. Za čitanje atributa morate koristiti getAttribute(), za promjenu vrijednosti setAttribute().

Brzina čitanja podaci-atributi mnogo niže u usporedbi s pohranjivanjem ovih podataka JS. Korištenje skup podatakačak i sporije od getAttribute().