@@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'

Wozu color und fontSize erst als Zahlen und dann in Strings umwandeln?

Weil es sich in erster Linie um Zahlen handelt. Erst bei der »Übergabe« an CSS muss ich diese in das richtige Format bringen. Dieses spezifische Format sollte von der Notation getrennt sein. Die Grundinformation ist nicht '150%', sondern nur 150, nicht '#F1630C', sondern 0xF1630C bzw. 15.819.532.

Ein JavaScript-Komprimierer bspw. kann mit Zahlen auch besser umgehen als mit Strings.

Als Datenmodell für RGB ist eine Zahl untauglich

Huch? Wieso wird RGB dann allerorten als Zahl notiert? Was ist denn F1630C - doch eine hexadezimale Zahl. In sämtlichen mir bekannten Programmiersprachen notiert man RGB(A)-Farbwerte als hexadezimale Zahlen. Klar, strenggenommen ist das ein Tripel aus drei bzw. vier Werten, in der üblichen Notation aber eine einzelne Zahl.

es sind ja drei. Also wenn schon, denn schon:
if (diff < 1) { color_r = 0xF1; color_g = 0x63; color_b = 0x0C; … }
if (diff < 1) { color = [0xF1, 0x63, 0x0C]; … }

Eine Trennung nach R, G und B ist zwar semantisch richtig, aber nicht nötig. Ich brauche das Tripel letztlich als zusammenhängende Zahl, also kann ich den Wert auch so notieren.

Aber nichts von alledem sollte man wirklich tun. Wo blieb denn deine Predigt für die Trennung von Verhaltens- und Präsentationsschicht?

Ich habe darauf verzichtet, weil es um JavaScript-Stil ging.

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';

  
Dass man »spans[q].className =« eben nicht x-mal wiederholen sollte, darum ging es mir.  
  
Mathias