Rolf B: Eigenschaften in CSS-Klassen mit JavaScript ändern

Beitrag lesen

SELF-Forum

Eigenschaften in CSS-Klassen mit JavaScript ändern

Rolf B
– Informationen zu den Bewertungsregeln

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

--
sumpsi - posui - obstruxi
Beitrag melden
–
Informationen zu den Bewertungsregeln