Kubadilisha Mitindo Kupitia data- Sifa katika JavaScript

Ili kutatua tatizo lililoelezewa katika somo lilopita, hutatakiwi kuweka madarasa kwa kipengele, badala yake tutabadilisha thamani ya data- sifa. Hii itakuwa rahisi kwa sababu sifa kama hiyo inaweza kuwa na thamani moja tu na wakati wa kuandika thamani mpya itafuta ile ya zamani peke yake.

Kwa mfano, hivi ndivyo tutakavyoweka mtindo wa mafanikio:

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

Na hivi ndivyo mtindo wa hitilafu:

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

Tutaweka mitindo ya hali zetu kupitia wachaguzi wa sifa:

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

Sasa kwa urahisi tunaweza kupaka rangi ya mafanikio kwa kipengele chetu:

elem.dataset.type = 'success';

Na hivi ndivyo tutakavyopaka rangi ya hitilafu:

elem.dataset.type = 'error';

Kuna uingizaji maadili. Wakati wa kupoteza umakini, angalia nambari iliyoingizwa ndani yake. Ikiwa nambari hii ni chini ya kumi, ipake rangi ya kijani kiwingu cha uingizaji maadili, ikiwa ni kati ya kumi na ishirini - kwa rangi ya manjano, na ikiwa ni zaidi ya ishirini - kwa nyekundu.