Vlera e atributit të të dhënave html5 php. Klasat si objekt: classList

Siç mund ta shihni, mund të specifikoni çdo emër dhe çdo vlerë. Por këto parametra nuk bëjnë asgjë me elementin, kështu që pse nevojiten fare? Ka të paktën disa mënyra për të përdorur atributet e të dhënave në ndërtimin e faqes në internet, dhe le t'i shohim ato.

Përdorimi 1 - referimi i elementeve në css

Nëse e dini se çfarë janë përzgjedhësit e atributeve, tashmë mund të merrni me mend se si mund të përdoren veçoritë e reja. Duke specifikuar një atribut unik të të dhënave për një etiketë, mund t'i referoheni atij në mënyrë të përshtatshme në stile. Le të shohim një shembull:

Kjo na lejoi t'i referohemi elementit pa përdorur klasa stili. Sidoqoftë, nëse mendoni për këtë, atëherë kjo nuk jep ndonjë avantazh të veçantë; për të hyrë në klasë, duhet të bëni afërsisht të njëjtat hapa. Kështu, ju thjesht zgjeroni mundësitë për përzgjedhësit dhe asgjë më shumë.

Përdorni Rastin 2 - Ruajtja e vlerave dhe përdorimi i tyre

Në shikim të parë, vlerat e atributeve të të dhënave nuk ndryshojnë asgjë dhe nuk ndikojnë fare në faqen e internetit. Pra, pse nevojiten fare? Në fakt, ju mund të gjeni një përdorim për to nëse mbani mend funksionin attr () në css.

Le të vendosim detyrën: duhet të shfaqni tekst shpjegues për fotot në faqe, i cili do të shfaqet ose menjëherë me ngarkimin e imazhit, ose kur rri pezull mbi të, pavarësisht se si. Prompti standard zbatohet duke përdorur atribut titulli.

Por një sugjerim i tillë mund të mos ju kënaqë në shumë mënyra. Së pari, shfaqet pa probleme (gjë që nuk është gjithmonë e nevojshme). Së dyti, ajo zhduket pas një kohe. Së treti, shfaqet në vende të ndryshme, në varësi të vendndodhjes së kursorit. Epo, më së shumti një problem i madh– Ne nuk mund ta stilojmë në asnjë mënyrë këshillën tonë të veglave – do të jetë gjithmonë tekst i zi në sfond të bardhë, gjë që nuk është shumë interesante.

Pra, më lart në kod, ne futëm një fotografi, treguam shtegun drejt saj dhe gjithashtu regjistruam një parametër arbitrar të të dhënave. Tani mund të zbatoni daljen e një shpjegimi për foton në mënyrën e mëposhtme:

img (ekrani: blloku i brendshëm; ) img:after (përmbajtja: attr(data-img); )

Çfarë kemi bërë? Tani të gjitha imazhet do të kenë një pseudo element që do të përmbajë vlerën atribut i të dhënave-img nëse disponohet etiketa img. Në një mënyrë kaq të thjeshtë, ju mund të shfaqni tekstin shpjegues për foton.

Unë nuk do të jap udhëzime në këtë artikull se si të lëshoj një aluzion. Unë do të them vetëm se si parazgjedhje do të shfaqet pasi faqja të jetë ngarkuar. Shpesh duhet të fshihet fillimisht dhe të shfaqet kur rri pezull mbi imazhin. Për ta zbatuar këtë, duhet të përdorni përzgjedhësin img:hover:after.

Epo, cilat janë atributet e tjera html5 që u shfaqën vetëm në këtë specifikim? Këto përfshijnë, për shembull, kontrollet - një atribut për elementët e rinj audio dhe video, i cili ju lejon të shfaqni kontrollet për një video ose regjistrim audio.

Për një video, duke përdorur parametrin e posterit, mund të specifikoni rrugën drejt imazhit që do të jetë sfondi përpara se të fillojë videoja. Në përgjithësi, nuk ka aq pak atribute të tilla të vogla.

Gjithashtu në single elementi hyrës ka shumë opsione të reja. Tani mund të krijoni fusha të dhënash Email, telefoni, zgjedhja e datës ose orës së kalendarit, fusha e përzgjedhjes së ngjyrave, etj. Bosh atributi i kërkuar bën që çdo fushë të kërkohet të plotësohet, nëse kjo nuk bëhet, atëherë shfletuesi thjesht nuk do të anashkalojë dorëzimin e formularit.

Sigurisht, i vetmi disavantazh i të gjitha këtyre risive është se ato nuk mbështeten kudo siç duhet. Pra, nëse veçoritë e reja funksionojnë mirë në një shfletues dhe përdoruesit mund të përdorin fushat e reja, mund të mos jetë e njëjtë në një shfletues tjetër të internetit. Natyrisht, vetë përdoruesit janë pjesërisht fajtorë për mospërditësimin e softuerit, por gjithashtu duhet të mbani gjurmët e asaj që mbështetet dhe si. AT

Shumë kohë më parë, në ditët e XHTML/HTML4, zhvilluesit kishin vetëm disa opsione që mund të përdornin për të ruajtur të dhëna arbitrare të lidhura me DOM. Ju mund të shpikni atributet tuaja, por kjo ishte e rrezikshme - kodi juaj nuk do të ishte i vlefshëm, shfletuesit mund të injoronin të dhënat tuaja dhe kjo mund të shkaktonte probleme nëse emri përputhej me atributet standarde HTML.

Prandaj, shumica e zhvilluesve u mbështetën në atributet e klasës ose rel, pasi ato ishin mënyra e vetme e arsyeshme për të ruajtur linja shtesë. Për shembull, le të themi se po ndërtojmë një miniaplikacion për të shfaqur mesazhe të tilla si një afat kohor në Twitter. Në mënyrë ideale, JavaScript duhet të jetë i konfigurueshëm pa pasur nevojë të rishkruhet kodi, kështu që ne përcaktojmë ID-në e përdoruesit në atributin e klasës, si kjo:

Tona Kodi JavaScript do të kërkojë elementin me ID mesazhe. Me ndihmën e skenarit, ne do të kërkojmë klasa duke filluar me përdorues_, dhe "bob" në rastin tonë do të jetë ID e përdoruesit, dhe ne do të shfaqim të gjitha postimet e këtij përdoruesi.

Le të themi se do të donim të pyesnim gjithashtu shuma maksimale mesazhe dhe kapërceni mesazhet më të vjetra se gjashtë muaj (180 ditë):

Atributi ynë klasës rrëmuhet shumë shpejt - është më e lehtë të bësh një gabim dhe analizimi i vargjeve në JavaScript bëhet gjithnjë e më i vështirë.

Atributet e të dhënave HTML5

Për fat të mirë, HTML5 prezantoi aftësinë për të përdorur atributet e personalizuara. Ju mund të përdorni çdo emër në shkronja të vogla parashtesa të dhëna -, për shembull:

Atributet e personalizuara të të dhënave:

• ato janë vargje - në to mund të ruani çdo informacion që mund të përfaqësohet ose të kodohet si varg, si p.sh. JSON. Transmetimi i tipit duhet të bëhet me JavaScript
• duhet të përdoret në rastet kur nuk ka elementë ose atribute të përshtatshme HTML5
• referojuni vetëm faqes. Ndryshe nga mikroformatet, ato duhet të injorohen. sistemet e jashtme, lloji Motorë kërkimi dhe robotët e kërkimit

Shembulli i përpunimit të JavaScript #1: getAttribute dhe setAttribute

Të gjithë shfletuesit ju lejojnë të merrni dhe ndryshoni atributet e të dhënave duke përdorur metodat getAttribute dhe setAttribute:

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

Kjo funksionon, por duhet të përdoret vetëm për të ruajtur përputhshmërinë me shfletuesit më të vjetër.

Shembulli #2 i përpunimit të JavaScript: Metoda jQuery data().

Duke filluar me Versionet jQuery 1.4.3 metoda e të dhënave() trajton atributet e të dhënave HTML5. Ju nuk keni nevojë të specifikoni në mënyrë eksplicite prefiksin të dhëna - kështu që kodi si ky do të funksiononte:

Var msglist = $("#msglist"); var show = msglist.data("madhësia e listës"); msglist.data("lista-madhësia", shfaq +3);

Por sido që të jetë, mbani në mend se jQuery përpiqet të konvertojë vlerat e atributeve të tilla në llojet e duhura (boolean, numra, objekte, vargje ose null) dhe do të ndikojë në DOM. Ndryshe nga setAtributi, metodë të dhëna () nuk do të zëvendësojë fizikisht atributin data-list-size- nëse kontrolloni vlerën e tij jashtë jQuery - do të jetë ende 5.

Shembulli #3 i përpunimit të JavaScript: API për të punuar me grupet e të dhënave

Dhe së fundi, ne kemi API-në e të dhënave HTML5, e cila kthen një objekt DOMStringMap. Duhet të mbahet mend se atributet e të dhënave janë hartuar në një objekt pa parashtesa të dhëna -, vizat hiqen nga emrat dhe vetë emrat konvertohen në camelCase, për shembull:

Kodi ynë i ri:

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

Ky API mbështetet nga të gjithë shfletues modern, por jo IE10 dhe më poshtë. Ekziston një zgjidhje për shfletues të tillë, por ndoshta është më praktike të përdorni jQuery nëse jeni duke shkruar për shfletues të vjetër.

Na lejoni të ruajmë informacion shtesë mbi elementët standardë, semantikë HTML pa hake të tjera si atributet jo standarde, vetitë shtesë në DOM ose Node.setUserData() .

Sintaksa HTML

Sintaksa është e thjeshtë. Çdo atribut në cilindo element, emri i atributit të të cilit fillon me të dhëna- është një atribut i të dhënave. Thuaj se keni një artikull dhe ti deshiron për të ruajtur disa informacione shtesë që nuk kanë ndonjë paraqitje vizuale. Thjesht përdorni atributet e të dhënave për këtë:

Qasje në JavaScript

Për të marrë një atribut të dhënash përmes objektit të të dhënave, merrni veçorinë nga pjesa e emrit të atributit pas të dhënave- (vini re se vizat janë konvertuar në camelCase).

Const article = document.querySelector("#electric-cars"); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "makina"

Çdo veti është një varg dhe mund të lexohet dhe shkruhet. Në përcaktimin e rastit të mësipërm article.dataset.columns = 5 do ta ndryshonte atë atribut në "5".

Qasja në CSS

Vini re se, pasi atributet e të dhënave janë atribute të thjeshta HTML, mund t'i qaseni edhe nga CSS. Për shembull, për të treguar të dhënat mëmë në artikull, mund të përdorni përmbajtjen e krijuar në CSS me funksionin attr():

Artikull::para (përmbajtja: attr(të dhënat-prind);

Atributet e të dhënave mund të ruhen gjithashtu për të përmbajtur informacione që ndryshojnë vazhdimisht, si rezultatet në një lojë. Përdorimi i përzgjedhësve CSS dhe aksesi JavaScript këtu ju lejon të krijoni disa efekte të shkëlqyera pa pasur nevojë të shkruani rutinat tuaja të ekranit. Shiko këtë transmetim të ekranit për një shembull duke përdorur përmbajtjen e krijuar dhe tranzicionet CSS (shembull JSBin).

Vlerat e të dhënave janë vargje. Vlerat e numrave duhet të citohen në përzgjedhës që stilimi të hyjë në fuqi.

Çështjet

Mos ruani përmbajtje që duhet të jenë të dukshme dhe të aksesueshme në atributet e të dhënave, sepse teknologjia ndihmëse mund të mos ketë qasje në to. Përveç kësaj, zvarritësit e kërkimit mund të mos indeksojnë vlerat e atributeve të të dhënave.

Çështjet kryesore që duhen marrë parasysh janë Internet Explorer mbështetje dhe performancë. Internet Explorer 11+ ofron mbështetje për standardin, por të gjitha versionet e mëparshme nuk e mbështesin grupin e të dhënave. Për të mbështetur IE 10 dhe më poshtë, duhet të përdorni atributet e të dhënave me getAttribute() në vend. Gjithashtu, performanca e leximit të atributeve të të dhënave në krahasim me ruajtjen e këtyre të dhënave në një objekt të rregullt JS është i dobët.

HTML5 shtoi aftësinë për të ruajtur të dhënat direkt në html kodi. Megjithatë, këto të dhëna nuk do të jenë të dukshme për përdoruesin. Atributet e të dhënave-* na lejon të ruajmë të dhëna shtesë në ndonjë html elemente pa emra klasash ndotëse.

Sintaksa HTML

Sintaksa është shumë e thjeshtë. Për shembull, ju keni një artikull dhe dëshironi të ruani disa Informacion shtese, të cilat nuk duhet të shfaqen. Duke përdorur atributet e të dhënave-* mund të bëhet kështu:

Nga shembulli shihet se të gjitha atributet e të dhënave-* shkruhen si më poshtë:

"data-" + "name-parameter"

Qasje nga JavaScript

Leximi i të dhënave nga atributet e të dhënave-* gjithashtu shumë e thjeshtë. Ne mund të përdorim getAttribute () për lexim, por standardi përcakton një mënyrë më të thjeshtë, përkatësisht përmes pronës grup i të dhënave:

var artikull = dokument.querySelector("#electriccars"); vardata = artikull.set; // data.columns -> "3" // data.indexnumber -> "12314" // data.parent -> "makina"

Vlera e çdo vetie është një varg, ne mund ta marrim dhe ta ndryshojmë këtë vlerë. Nëse shkruajmë artikull.set.kollonat = 5, pastaj pronën kolonat e të dhënave do të ndryshojë në 5.

Qasja në CSS

për të atributet e të dhënave-* ne mund të hyjmë po aq lehtë përmes css. Për shembull, për të marrë të dhëna-prind atribut artikull, ju mund të përdorni pseudo-elemente në css Me attr():

Artikull::para (përmbajtja: attr(të dhënat-prind);

Ju gjithashtu mund të përdorni përzgjedhës në css për të ndryshuar stilet në varësi të vlerës te dhena-*:

Artikulli (gjerësia: 400 px; ) artikulli (gjerësia: 600 px; )

Ju mund të shihni se si funksionon gjithçka në lidhjen.

atributet e të dhënave kështu që mund të përmbajë informacione në ndryshim, të tilla si rezultatet në një lojë. Duke përdorur css përzgjedhësit dhe aksesi nga JavaScript ne mund të krijojmë efekte të lezetshme pa shkruar kod shtesë për të shfaqur. ne jemi duke shikuar video. Lidhja me kodin.

Problemet

Mos ruani të dhëna në atributet e të dhënave-*, të cilat duhet të shfaqen sepse teknologjitë ndihmëse nuk mund t'i qasen. Përveç kësaj robotët e kërkimit jo të indeksuar atributet e të dhënave-*.

E trishtueshme por dmth nuk mbështesin grup i të dhënave. Për të lexuar atributet, duhet të përdorni getAttribute (), për të ndryshuar vlerën setAttribute().

Shpejtësia e leximit të dhëna-atribute shumë më e ulët në krahasim me ruajtjen e këtyre të dhënave në JS. Përdorimi grup i të dhënave edhe më ngadalë se getAttribute ().