Höhe von DIV-Elementen

[ChrisB]

Hi,

Ich dachte da an etwas relativ einfaches wie divElt.className = 'H' + calcHeight(i);
Dann müssten halt viele classNames namens 'Hxx' bereits existieren.

CSS-Regeln können sie auch existieren, wenn sie dynamisch per JavaScript erzeugt wurden.

Würde das Ganze schneller gehen, wenn man die Höhen über className zuweist?

Benchmarks dazu finden sich im Netz. Das wirkt sich aber nur in entsprechend „großem Maßstab“ aus - bei einem Diagrämmchen, dass du per JavaScript erzeugst, ist das absolut egal.

Generell zur Thematik:

Grundsätzlich ist natürlich der Weg, Logik, Daten und Darstellung zu trennen, der der Wahl - und damit in so einem Fall auch, per JavaScript eben Klassen zu setzen, die mit Regeln korrespondieren, die Formatierung dort unterbringen, wo sie hingehört - im Stylesheet.

In einem Spezialfall wie diesem hier kann man davon aber natürlich abweichen. Die Darstellung ist hier nicht streng von den Daten getrennt, sondern „Bestandteil“ der Daten - schliesslich ist die Höhe der Balken im Verhältnis zu einander nicht vom jeweiligen „Geschmack“ abhängig, wie das rot oder blau als Hintergrundfarbe wären - sondern ist ein wesentlicher Bestandteil der Visualisierung der Daten, die anderweitig gar keinen Sinn ergeben würde.
Deshalb kann man hier die Höhe durchaus guten Gewissens auch direkt per JavaScript setzen. (Bei der schon erwähnten Hintergrundfarbe sieht das wieder anders aus, die gehört ins Stylesheet.)

Und der wichtigste Schritt vor diesen Überlegungen ist natürlich der, dass die Daten erst mal im HTML in einer Weise repräsentiert werden, die sie auch nutzbar macht, wenn kein JavaScript oder möglicherweise nicht mal CSS vorhanden sind.

MfG ChrisB