Kërkimi i ngjyrave për meshkuj html pyet. Puna me atributet e të dhënave në HTML5

Vlad Merzheviç

Ajo që mungonte shumë në HTML 4 ishte aftësia për të krijuar atributet tuaja për të ruajtur vlerat. Pse është e nevojshme kjo? Këtu janë disa detyra ku kjo mund të kërkohet.

• Krijimi i këshillave të veglave pa përdorur skriptet.
• Përcaktoni stilin e një elementi bazuar në një vlerë atributi.
• Marrja dhe ndryshimi i vlerave përmes skripteve.

HTML5 ka një atribut të ri universal që mund të shtohet në çdo etiketë. Rregullat për të shkruar një atribut janë të thjeshta:

• Ne gjithmonë fillojmë me të dhënat-;
• Ne përdorim vetëm shkronja latine, vizë (-), dy pika (:) dhe nënvizim (_).

CSS dhe JavaScript i qasen këtyre atributeve pak më ndryshe, kështu që le të shohim shembuj për to veç e veç.

CSS

CSS ka atribute etiketash; nëse ka ndonjë atribut ose një vlerë të caktuar, ne vendosim stilin e kërkuar.

përmbajtja

Tani mund t'i referohemi këtij elementi si një div në stile dhe të vendosim dizajnin e dëshiruar për të. Në përgjithësi, kjo i ngjan mënyrës se si funksionojnë klasat, kështu që nuk është një veçori unike ose e nevojshme. Pra, është më e dobishme të vendosni vlera.

përmbajtja

Në CSS, ne mund të vendosim më pas stile të ndryshme për vlera të ndryshme të atributit tonë të kolonave të të dhënave.

Div (gjerësia: 480 px; ) div (gjerësia: 720 px; )

Përsëri, ky është deri diku një zëvendësim për klasat; asgjë nuk ju pengon të bëni klasa me emrat kolona-2, kolona-3 dhe t'i shtoni ato nëse është e nevojshme.

Një aplikim më elegant është përfshirja e funksionit attr(). Merr vlerën e atributit të dhënë dhe e fut atë në stil. Është i përshtatshëm për ta përdorur këtë për të krijuar këshilla veglash. Ne e shkruajmë tekstin direkt brenda elementit dhe zbatojmë shfaqjen dhe dizajnin e këshillës së veglave duke përdorur CSS.

Matësi i këshillës së veglave ( pozicioni: relative; ) matësi: hover::pas (përmbajtja: attr(përshkrimi i të dhënave); sfondi: #ffe; mbushja: 5 px; kufiri: 1px solid #666; pozicioni: absolute; sipër: 20 px; )

Temperatura e ujit

Në këtë shembull, atributi i përshkrimit të të dhënave i shtohet elementit që përmban tekstin e nevojshëm për shfaqje. Vetë shfaqja shfaqet duke përdorur pseudo-elementin ::after dhe vetinë e përmbajtjes, vlera e së cilës është funksioni attr().

JavaScript

Nëse në CSS ne i qasemi drejtpërdrejt emrit të atributit, duke e specifikuar plotësisht, atëherë në JavaScript kjo bëhet përmes metodës së të dhënave. Vetë emri i atributit konvertohet në një variabël sipas rregullave të mëposhtme:

• të dhënat - të hedhura;
• çdo vizë që i paraprin shkronjës hidhet poshtë dhe shkronja pasi të bëhet e madhe.

Në praktikë duket kështu.

përshkrimi i të dhënave kthehet në përshkrim.
data-full-description bëhet FullDescription.
data-description-of-tag bëhet descriptionOfTag.

Mënyra tradicionale për të hyrë në një element dhe atributet e tij është të vendosni një ID dhe të aksesoni elementin nëpërmjet getElementById, siç tregohet në shembullin më poshtë.

grupi i të dhënave Përdoruesi var el = document.getElementById("përdorues"); id = el.dataset.id; // Merr vlerën e atributit data-id user = el.dataset.user; dob = el.dataset.dateOfBirth; // Merr vlerën e atributit data-date-of-birth el.dataset.ban = "Jo"; // Cakto një atribut të ri të data-ban dhe vlerën e tij console.log(user); // Shtypni vlerën e ndryshores në konsolën e përdoruesit console.log(dob); // Shtypni vlerën e ndryshores dob në tastierë

Së pari, ne i shtojmë elementit një identifikues me një vlerë unike. Më pas ne aksesojmë elementin nëpërmjet getElementById. Tani ne mund të aksesojmë çdo atribut të të dhënave përmes metodës së të dhënave, dhe jo vetëm të marrim, por edhe të vendosim vlera. Ato do të ruhen derisa faqja të ringarkohet ose derisa të vendoset një vlerë e re.

Përpara HTML5, puna me atributet në elementët HTML nuk ishte argëtuese, për ta thënë butë. Më duhej të përdorja atribute si rel ose class. Dhe disa zhvillues madje krijuan atributet e tyre.

Por gjërat ndryshuan në mënyrë dramatike kur HTML5 na dha mundësinë të përdorim atributet e tij të të dhënave. Tani mund të ruani mjaft lehtë të dhëna shtesë duke përdorur mjete standarde.

Si funksionojnë atributet e datës?

Emri flet vetë. Atributet e datës ruajnë disa të dhëna të specifikuara nga ju. Ata gjithmonë fillojnë me të dhënat e prefiksit- dhe përfundojnë me diçka më të kuptueshme për zhvilluesin (sipas specifikimeve, lejohen vetëm shkronjat e vogla dhe vizat). Një element mund të përmbajë çdo numër të atributeve të datës.

Një shembull i përdorimit të atributeve për të ruajtur të dhënat e përdoruesit:

Kalvini

Sigurisht, këto të dhëna nuk janë shumë të dobishme për përdoruesin përfundimtar, pasi ai thjesht nuk e sheh atë, por atributet e datës përdoren shumë gjerësisht në teknologjitë moderne të internetit.

Këtu është një shembull i një butoni për të fshirë diçka në faqen tuaj:

Fshije

Të gjithë parametrat e nevojshëm janë në majë të gishtave dhe gati për t'u dërguar në skriptin e fundit. Nuk ka më atribute rel ose trajtim ID ose veprim të kërkuar nga atributet e tjera.

Çfarë mund të ruani?

Ekziston vetëm një rregull për t'u mbajtur mend: objektet nuk mund të ruhen në atributet e datës. Kjo është, është e mundur nëse i serializoni fillimisht. Tani për tani, thjesht mbani mend se, në parim, mund të ruani vetëm të dhëna vargu.

Leximi/shkrimi i atributeve duke përdorur javascript

Le të kthehemi te shembulli i butonit dhe të shohim se si mund të aksesojmë atributet e kërkuara.

// Ky është një buton var button = document.getElementById("yur-button-id"); // Merr vlerën var cmd = button.getAttribute("data-cmd"); var id = button.getAttribute("data-id"); // Ndrysho butonin e vlerës.setAttribute("data-cmd", yourNewCmd); button.setAttribute("data-id", yourNewId);

Shumë e thjeshtë, apo jo? Tani thjesht kaloni parametrat cmd dhe id në aplikacionin tuaj dhe kryeni kërkesën e nevojshme ajax.

Lexo/shkruaj atributet e datës duke përdorur jQuery.

Këtu është një analog në jQuery:

// Merr vlerën var cmd = $("#your-button-id").attr("data-cmd"); var id = $("#your-button-id").attr("data-id"); // Ndrysho vlerën $("#your-button-id") .attr("data-cmd", yourNewCmd) .attr("data-id", yourNewId);

Të mos ngatërrohet me metodën data(). Edhe pse kanë disa gjëra të përbashkëta, në përgjithësi janë gjëra krejtësisht të ndryshme. Edhe nëse nuk jeni plotësisht të njohur me këto metoda, thjesht përdorni attr() .

Përdorimi i API-së së të dhënave

HTML5 madje na ofron një API për të punuar me atributet e të dhënave, megjithëse IE10 dhe më poshtë nuk e mbështesin atë.

Përsëri, një shembull me një buton, por këtë herë duke përdorur API-në e të dhënave:

// Ky është një buton var button = document.getElementById("yur-button-id"); // Merr vlerën var cmd = button.dataset.cmd; var id = button.dataset.id; // Ndrysho butonin e vlerës.dataset.cmd = yourNewCmd; button.dataset.id = yourNewId;

Ju lutemi vini re mungesën e prefiksit të të dhënave dhe vizave. Ashtu si kur punoni me vetitë CSS në JavaScript, do t'ju duhet rasti "humpback". API-ja e grupit të të dhënave përkthen emrat e atributeve në mënyrë që emri i të dhënave-some-atribute-emri në HTML të bëhet dataset.someAttributeName në JavaScript.

Çfarë mund të bëni me atributet e datës?

Shembujt e dhënë janë vetëm baza. Ju mund të bëni operacione shumë më komplekse me atributet e datës. Le të shohim disa shembuj.

Filtrimi

Le të themi se jeni duke punuar me një listë elementësh dhe ju duhet t'i filtroni ato sipas fjalës kyçe. Vendosni fjalët kyçe në atributet e të dhënave dhe përdorni një skript të vogël përsëritës për t'i përpunuar ato.

• Ford
• Chevrolet
...

Shembull "në gju":

$("#filter").on("keyup", funksion() ( var fjalen = $(this).val().toLowerCase(); $(".cars > li").secili(funksion() ( $(this).toggle(fjala kyçe.gjatësia< 1 || $(this).attr("data-models").indexOf(keyword) > -1); } ); } );

Stilizimi

Sigurisht, është më mirë të aplikoni stile duke përdorur klasa, por e njëjta gjë mund të bëhet duke përdorur atributet e të dhënave. Kështu mund të aplikoni një stil për elementët që kanë një atribut specifik të dhënash, pavarësisht nga vlera e tij. Le të shohim së pari HTML-në:

Dhe tani CSS:

(sfondi: e kuqe;)

Por si ta marrim parasysh vlerën e një atributi? Kështu mund të aplikoni një stil për të gjithë elementët me një atribut paralajmërues të të dhënave, vlera e të cilit përmban fjalën gabim:

(ngjyra: e kuqe;)

Cilësimet

Korniza e mirënjohur Bootstrap përdor atributet e të dhënave për të konfiguruar shtojcat e saj JavaScript. Shembull popup:

Popover në krye

Mënyra më e mirë për të ruajtur të dhënat

Atributet e datës janë shumë të zakonshme në teknologjitë e internetit. Por gjëja më e rëndësishme është se ato mbështeten plotësisht nga shfletuesit më të vjetër dhe po depërtojnë gjithnjë e më thellë në standardet e uebit. Dhe meqenëse standardi HTML tashmë është miratuar, ju mund të punoni me ta sot dhe të mos keni frikë se ata do të zhduken papritur nesër.