Alternimi i stileve përmes atributit data- në JavaScript

Për të zgjidhur problemin e përshkruar në mësimin e mëparshëm, ne nuk do t'i caktojmë elementit klasa, por do të ndryshojmë vlerën e atributit data-. Kjo do të jetë e përshtatshme sepse një atribut i tillë mund të ketë vetëm një vlerë dhe gjatë caktimit, vlera e re do të fshijë automatikisht atë të vjetër.

Për shembull, kështu do të caktojmë stilin e suksesit:

<div id="elem" data-type="success">
	text
</div>

Dhe kështu stilin për gabimin:

<div id="elem" data-type="error">
	text
</div>

Stilet e gjendjeve tona do t'i caktojmë përmes përzgjedhësve të atributeve:

[data-type="success"] {
	color: green;
}
[data-type="warning"] {
	color: orange;
}
[data-type="error"] {
	color: red;
}

Tani ne lehtë mund ta ngjyrosim elementin tonë në ngjyrën e suksesit:

elem.dataset.type = 'success';

Dhe kështu do ta ngjyrosim në ngjyrën e gabimit:

elem.dataset.type = 'error';

Jepet një input. Në humbjen e fokusit, kontrolloni numrin e futur në të. Nëse ky numër është deri në dhjetë, atëherë ngjyroseni inputin në të gjelbër, nëse nga dhjetë në njëzet - në të verdhë, dhe nëse më shumë se njëzet - në të kuqe.