Frage von exoarx, 19

Stylesheet mit JS erstellen und .addrule/ .insertrule?

Hallo,

Ich vesuche eine Stylesheet mit JS zu erzeugen und styles einzufügen.

if (style == null) {
  var style = document.createElement('style');
  style.setAttribute('type', 'text/css');
  style.setAttribute('data-style', 13);
  if (style.styleSheet) {
    style.styleSheet.cssText = '';
  } else {
    style.appendChild(document.createTextNode(''));
  }
  document.head.appendChild(style);

}
if (typeof style.insertRule === 'function') {
  style.insertRule("main > section[data-y='0']{top: 200px;}");
} else if (typeof style.addRule === 'function') {
  style.addRule("main > section[data-y='0']", "{top: 200px;}");
}

Leider klappt das script nicht.
Hat jemand eine Idee was ich falsch mache?
Fehlermeldung gibt es keine!

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Dory1, 12

addRule / insertRule sind keine Funktionen von style sondern von style.sheet:

if (typeof style.sheet.insertRule === 'function') {
  style.sheet.insertRule("main > section[data-y='0']{top: 200px;}",0);
} else if (typeof style.sheet.addRule === 'function') {
  style.sheet.addRule("main > section[data-y='0']", "{top: 200px;}",0);
}

Du musst auch darauf achten den zweiten Parameter index anzugeben, ansonsten fliegt dir der Code zumindest unter Chrome um die Ohren!

Btw. der null-check

if (style == null) {

ist unnötig.

Antwort
von RakonDark, 13

Was heisst klappt nicht ?
Sorry aber bißchen genauer musst Du schon werden.

Kommentar von exoarx ,

Die Stylesheet wird erstellt jedoch werden die rules nicht eingefügt.

Keine passende Antwort gefunden?

Fragen Sie die Community