Eigenschaften in CSS-Klassen mit JavaScript ändern

[Friedel]

Hallo, ich stelle gerade ganz erstaunt fest, dass ich für eine eigentlich ganz einfache Sache keine einfache Lösung kenne. Ich habe eine Html-Seite, auf der offline Dokumente Layoutet werden. Dazu werden CSS-Eigenschaften mit Javascript verändert, Elemente erzeugt, CSS-Klassen zugewiesen usw. Klappt alles wunderbar.

Jetzt habe ich aber eine ganze Reihe von Elementen, die alle eine bestimmt Klasse haben.

<irgendwas class="Klasse1">Inhalt</irgendwas>

.Klasse1   {width: 123em; z-index: 172; color:#abc;}

Jetzt möchte ich der Klasse aber andere Eigenschaften zuweisen. Es sollte doch irgendwie möglich sein, ohne Schleifen und umständlich Fallunterscheidungen einfach dafür zu sorgen, dass daraus z.B.

<irgendwas class="Klasse1">Inhalt</irgendwas>

.Klasse1   {width: 321px; z-index: 5; color:#321;}

wird. Aber wie?

[Matthias Scharwies]

Servus!

Hallo, ich stelle gerade ganz erstaunt fest, dass ich für eine eigentlich ganz einfache Sache keine einfache Lösung kenne. Ich habe eine Html-Seite, auf der offline Dokumente Layoutet werden. Dazu werden CSS-Eigenschaften mit Javascript verändert, Elemente erzeugt, CSS-Klassen zugewiesen usw. Klappt alles wunderbar.

Jetzt habe ich aber eine ganze Reihe von Elementen, die alle eine bestimmt Klasse haben.

<irgendwas class="Klasse1">Inhalt</irgendwas>

.Klasse1   {width: 123em; z-index: 172; color:#abc;}

Jetzt möchte ich der Klasse aber andere Eigenschaften zuweisen. Es sollte doch irgendwie möglich sein, ohne Schleifen und umständlich Fallunterscheidungen einfach dafür zu sorgen, dass daraus z.B.

<irgendwas class="Klasse1">Inhalt</irgendwas>

.Klasse1   {width: 321px; z-index: 5; color:#321;}

wird. Aber wie?

Einfacher wäre es .klasse1 durch .klasse2 mit classname oder ClassList.toggle zu ersetzen.

Du kannst mit JS aber auch im Stylesheet arbeiten:

• JavaScript/Tutorials/Stylesheets_dynamisch_ändern

Herzliche Grüße

Matthias Scharwies

[Friedel]

Einfacher wäre es .klasse1 durch .klasse2 mit classname oder ClassList.toggle zu ersetzen.

Ich weiß. Es ist oft einfacher, etwas ganz anders zu machen, als nötig ist.

Du kannst mit JS aber auch im Stylesheet arbeiten:

JavaScript/Tutorials/Stylesheets_dynamisch_ändern

Danke. Das ist zwar deutlich umständlicher als ich es mit vorgestellt hatte, aber es kann das, was ich erreichen will.

[Rolf B]

Hallo Friedel,

mir kommt da gerade noch eine Überlegung. Warum willst Du die Klasse ändern? Liegt es daran, dass die Klasse bei vielen Elementen hinterlegt ist und Du nicht alle Elemente aufsuchen und die Klasse ändern willst? Das ginge auch anders - gib dem Body eine "Schalterklasse", sowas wie "mode-1" und "mode-2", und definiere im Stylesheet Regeln pro Mode in dieser Art:

.mode-1 .klasse1 {
   ... einstellungen
}
.mode-2 .klasse1 {
   ... einstellungen
}
.mode-3 .klasse1 {
   ... einstellungen
}

Auf diese Weise ändern alle Elemente mit Klasse "klasse1" ihre Styles, sobald Du am Body die mode-Klasse änderst.

Oder liegt es daran, dass Du berechnete Werte einsetzen musst und daher keine vordefinierte CSS Regel verwenden kannst? In dem Fall - ok, geht nicht anders wenn der IE bedient werden muss.

Rolf

[Friedel]

Danke für die Anregung. Einige der Werte sind zwar berechnet oder vom User festgelegt, aber trotzdem habe ich darüber nachgedacht, das zu verwenden. Das würde mir einige Schreibarbeit ersparen, obwohl das nicht alle Eigenschaften wunschgemäß ändern kann. Aber inzwischen habe ich angefangen, das ganz anders zu machen. Da die Seite in jedem Fall JavaScript braucht, halte ich es für besser, jedes Element einzeln mit getElementById(). style… an zu passen und die Anpassungen blockweise in Funkionen zusammen zu fassen. Das ergibt zwar sehr viele Zeilen Quellcode, aber blickt man auch nach ein paar Jahren noch durch, wenn etwas geändert werden muss.

Das ganz ist soll ein Online-Generator für Visitenkarten, Flyer und ähnliches für einen gemeinnützigen Verein werden. Es werden also also wechselnde Texte, Überschriften, ein paar Logos aus einer Auswahl und ein paar Fotos durch die User eingesetzt, positioniert und formatiert. Zum Schluss wird daraus ein Pdf erzeugt.

Im Menü des Generators könnte die gesuchte Funktionalität sehr helfen. Aber wenn ich diese Funktionalität erst durch Workarounds erzeugen muss, wird der Quellcode natürlich schwer durchschaubar. In ein paar Jahren erinnere ich mich sicher nicht mehr wozu ich das alles so gemacht habe.

[Rolf B]

Hallo Friedel,

wenn der Generator online ist, kannst Du ja mal den Link posten. Es sei denn, er ist in einem privaten Bereich.

Rolf

[Friedel]

Hallo, in der ersten Fassung wird er wohl nur für Visitenkarten verwendet werden und in einem geschlossenen Bereich sein, weil die Namen, Adressen, Telefonnummern, E-Mail-Adressen, Bankverbindungen usw. der Vorstandsmitglieder in Auswahllisten enthalten sind. Aber wenn dann die zweite Version für Flyer kommt und ich dann noch dran denke, poste ich mal einen Link. Die dortigen Default-Texte werden wohl nur die Kontaktadressen der Landesverbände und des Bundesbüros enthalten. Die sind nicht geheim. 😉

[Rolf B]

Hallo Friedel,

du kannst die CSS Regel ändern, aber du könntest auch mit custom properties arbeiten.

Nachteile:

• Du hängst den Internet Explorer ab, der kennt das nicht.
• Du hast einen fetten Haufen Werte am body oder einem anderen geeigneten Containerelement hängen

Vorteile:

• Wenn die Werte in mehr als einer Regel vorkommen, greift die Änderung in allen Regeln.
• Du kannst das Style-Atribut löschen und bekommst die Defaultwerte zurück

Beispiel:

<head>
   <style>
   .Klasse1 {
      width: var(--breite, 123px);
      z-index: var(--zIndex, 5);
      color: var(--farbe, #f88);
   }
   </style>
</head>
<body>
   <div class="Klasse1">
      vulcanus vivat longus et prosperet
   </div>
   <button type="button" id="theButton">Click Me</button>
   <script>
   document.getElementById("clickme").addEventListener("click", function() {
      let bs = document.body.style;
      bs.setProperty("--breite", "20em");
      bs.setProperty("--farbe", "#00f");
      bs.setProperty("--zIndex", "47");
   });
   </script>
</body>

Rolf

[Friedel]

Danke. Das passt recht gut für meinen Zweck, aber dass es bei den IE-Usern nicht funktioniert ist ein k.o.-Kriterium. Es beunruhigt mich schon, dass ich genau weiß, was die Safari-User sehen. Aber die Testmöglichkeiten für CSS-Animationen für Safari und IE sind unter Linux recht bescheiden.

[Matthias Apsel]

Hallo Friedel,

ich schenke dir ein nicht.

Bis demnächst
Matthias

[Friedel]

???? Warum?

[Rolf B]

Hallo Friedel,

du schriebst weiter oben:

Es beunruhigt mich schon, dass ich genau weiß, was die Safari-User sehen.

Matthias schenkt dir das "nicht", das vor dem "genau" fehlt. Andernfalls würde mich deine Beunruhigung befremden 😂

Rolf

[Friedel]

Ahh! Den Fehler hatte ich gar nicht bemerkt. Aber als ich das letzte mal einen Safari benutzt habe, war ich auch beunruhigt, gerade weil ich dann wusste, was die sehen zu sehen bekommen.