Beispiel nicht nachvollziehbar

[Orlok]

Hallo Martin

Es gibt eine Schnittstelle zwischen Javascript und CSS? Du meinst, über die Zugriffsmöglichkeiten auf element.style oder das Absuchen des DOM mit querySelector() hinaus?

Es gibt das CSS Object Model, das eine ganze Reihe an Schnittstellen bereitstellt, die über das Style-Objekt und die Methode querySelector hinausgehen.

Du kannst dir beispielsweise über document.styleSheets eine Liste der eingebundenen Stylesheets in Form von CSSStyleSheet-Objekten ausgeben lassen, welche wiederum Zugriff auf die dort definierten Regeln gewähren, in Form von CSSRule-Objekten.

// get CSSStyleSheet object
const stylesheet = document.styleSheets[0];

// get CSSRule object
const rule = stylesheet.cssRules[0];

// log value
console.log(rule.cssText); // maybe: 'body { background-color: blue; }'

Über die Methoden insertRule und deleteRule von CSSStyleSheet-Objekten kannst du einem Stylesheet Regeln hinzufügen oder Regeln löschen.

// get CSSStyleSheet object
const stylesheet = document.styleSheets[0];

// get index position
const index = stylesheet.cssRules.length;

// add rule to stylesheet
stylesheet.insertRule('h1 { text-align: center; }', index);

Darüber hinaus hast du über die CSSStyleRule-Schnittstelle auch Zugriff auf die einzelnen Regeln und kannst beispielsweise über die Eigenschaft selectorText den Selektor lesen oder neu setzen, wobei letzteres aber wohl im Moment kaum unterstützt wird.

// get previously added rule
const rule = stylesheet.cssRules[1];

// log selector
console.log(rule.selectorText); // 'h1'

Jedenfalls kann natürlich nicht nur auf den Selektor einer Regel zugegriffen werden, sondern es gibt auch die Eigenschaft style, welche ein CSSStyleDeclaration-Objekt zurückgibt, das eine Reihe von Methoden zur Arbeit mit den in der CSSStyleRule definierten Eigenschaften bereitstellt.

// get previously added rule
const rule = stylesheet.cssRules[1];

// get property value
console.log(rule.style.getPropertyValue('text-align')); // 'center'

Also, wie dem auch sei, das ist natürlich nur ein kleiner Überblick, aber du siehst, es gibt durchaus eine ganze Reihe an Anknüpfungspunkten zwischen CSS und JavaScript. Aber sowohl Theorie als auch Praxis lassen hier noch einiges zu wünschen übrig, wie 1unitedpower ja schon andeutete …

Viele Grüße,

Orlok