@@Gunnar Bittersmann:
nuqneH
Aber nichts von alledem sollte man wirklich tun. Wo blieb denn deine Predigt für die Trennung von Verhaltens- und Präsentationsschicht?
Im Script sollte lediglich stehen:
if (diff<1) spans[q].className = 'diffrange_0_1';
else if (diff<4) spans[q].className = 'diffrange_1_4';
else if (diff<10) spans[q].className = 'diffrange_4_10';
else if (diff<15) spans[q].className = 'diffrange_10_15';
Ach, was red ich da?
Die Grenzen der Intervalle, die verschieden dargestellt werden, gehören vielleicht auch eher ins Stylesheet. Wenn sich diese später ändern sollen (bspw. nicht mehr [0, 1[, [1, 4[, [4, 10[, [10, 15[ und [15, ∞[, sondern [0, 5[,[5, 10[, [10, ∞[), möchte man ja nicht Script UND Stylesheet anpassen müssen.
Das Script sollte vielleicht gar nicht wissen, dass es solche Intervalle gibt: Einfach nur
`spans[q].className = 'diff' + Math.floor(diff);`{:.language-javascript}
Aber auch das nicht, denn eventuell bestehende Klassenzugehörigkeiten der betreffenden 'span'-Elemente sollten nicht überschrieben, sondern ergänzt werden:
`spans[q].className += ' diff' + Math.floor(diff);`{:.language-javascript}
Im Stylesheet:
~~~css
.diff0 { color: #f1630c; font-size: 150% }
.diff1,
.diff2,
.diff3 { color: #d96117; font-size: 130% }
.diff4,
.diff5,
.diff6,
.diff7,
.diff8,
.diff9 { color: #fa670c; font-size: 120% }
.diff10,
.diff11,
.diff12,
.diff13,
.diff14 { color: #eb6513; font-size: 110% }
In HTML5 ist nicht @class das Attribut der Wahl, sondern @data-*:
if (spans[q].dataset) spans[q].dataset.diff = Math.floor(diff);
else spans[q].setAttribute('data-diff', Math.floor(diff));
Zur Abfrage der Browserunterstützung von @data-* muss man freilich nicht in jedem Schleifendurchlauf spans[q].dataset
abfragen. Vor der Schleife:
var datasetSupported = !!document.documentElement.dataset;
In der Schleife:
if (datasetSupported) spans[q].dataset.diff = Math.floor(diff);
else spans[q].setAttribute('data-diff', Math.floor(diff));
Im Stylesheet dann mit Attributselektoren
[data-diff='0'] { color: #f1630c; font-size: 150% }
usw.
Qapla'
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)