Rolf B: CSS Sytle direkt ändern

Beitrag lesen

SELF-Forum

CSS Sytle direkt ändern

Rolf B
+1 Informationen zu den Bewertungsregeln

Hallo Henry,

das ist im gezeigten Spezialfall sicherlich einfacher, als über document.styleSheets und darin über die cssRules zu laufen und sich eine Regel herauszusuchen.

Und es funktioniert auch in Browsern, die das CSS API nicht implementieren. Es setzt nur voraus, dass Du für jede Regel, die Du so patchen willst, ein eigenes style-Element vorhältst, und Du kannst keine Werte in extern geladenen Stylesheets überschreiben.

Aber, äh, solche Browser sind aus den 90er Jahren. Das CSSStyleSheet Objekt wird schon vom IE4 unterstützt. Insofern könnte man das auch so tun:

findRule sucht eine CSS Style Rule mit einem bestimmten Selektor in einem style-Element mit einer bestimmten ID (bei externen Sheets könnte man auch über href gehen), und setzt darin dann das gewünschte Property auf den gewünschten Wert.

function findRule(styleId, selector) {
   let styleElem = document.getElementById("stl1");
   for (let rule of styleElem.sheet.cssRules) {
      if (rule.type != 1) continue;
      let selectors = rule.selectorText.split(", ");
      if (rule.selectorText == ".xy")
      
   }
}

function changeStyle(id, selector, property, value) {
   let rule = findRule(id, selector);
   if (rule)
      rule.style[property] = value;
}

<button onclick="changeStyle('stl1', '.xy', 'color', 'red')">Red Alert</button>

Das ist alles unpräzise, CSS erlaubt ja mehr als eine Rule mit einem bestimmten Selektor. Für einen produktiven Einsatz müsste man da genauere Selektion einbauen. Oder man pfeift auf den IE und macht es modern, mit custom propeties:

.xy {
   color: var(--xy-color);
}

body {
   --xy-color: teal;
}

<body>
<button onclick="document.body.style.setProperty('--xy-color', 'red')">Red Alert</button>

Das hängt den Internet Explorer ab, aber die Evergreen-Browser können das alle.

Rolf

--
sumpsi - posui - obstruxi
Beitrag melden
+1
Informationen zu den Bewertungsregeln