Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

JavaScript/Tutorials/Stylesheets dynamisch ändern

Aus SELFHTML-Wiki
< JavaScript‎ | Tutorials(Weitergeleitet von SetProperty)
Wechseln zu: Navigation, Suche

Im Artikel JavaScript und CSS wurde vorgestellt, wie Sie Formatvorlagen ändern können, indem Sie mit className und classList Klassen ändern, die dann andere Formatierungen haben. Um alternative Stile anzubieten, können Sie Stylesheets dynamisch wechseln oder diese direkt einfügen.

In diesem Artikel lernen Sie, wie Sie direkt in das Stylesheet neue Regeln einfügen können, ohne weitere HTTP-Requests beim Nachladen alternativer Stylesheets zu benötigen.

CSSOM und CSSStylesheet[Bearbeiten]

Externe Stylesheets werden vom Browser nicht im DOM, sondern in einem eigenen CSS Object Model (CSSOM) erstellt.[1]

Jedes einzelne Stylesheet bildet ein CSSStylesheet-Objekt.

Eigenschaften

  • CSSStyleSheet.cssRules: gibt eine CSSRuleList aller CSS-Festlegungen zurück
  • CSSStyleSheet.ownerRule: Wenn das Stylesheet mittels einer @import-Regel geladen wurde, gibt die ownerRule-Eigenschaft diese CSSImportRule zurück, sonst gibt es null zurück.

Methoden

  • CSSStyleSheet.deleteRule: löscht eine CSS-Festlegung
  • CSSStyleSheet.insertRule: fügt eine CSS-Festlegung in das aktuelle Stylesheet ein
  • CSSStyleSheet.addRule: nichtstandardisierte IE-Methode, um CSS-Festlegung einzufügen

Zugriff auf das CSSStylesheet-Objekt[Bearbeiten]

Sie können auf Ihr Stylesheet entweder über eine id oder das CSSStylesheet-Objekt zugreifen:

Beispiel
var sheets = document.styleSheets; // gibt eine array-ähnliche Liste aller Stylesheets aus

Am einfachsten ist es wohl, auf das erste verfügbare Stylesheet zuzugreifen:

Beispiel
var sheet = document.styleSheet[0];

Methoden[Bearbeiten]

deleteRule[Bearbeiten]

Die CSSStyleSheet.deleteRule-Methode löscht eine CSS-Festlegung.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

stylesheet.deleteRule(index)

Folgende Parameter ist nötig:

  • index: ganze Zahl, welche Festlegung gelöscht werden soll.

insertRule[Bearbeiten]

Die CSSStyleSheet.insertRule-Methode fügt eine CSS-Festlegung in das aktuelle Stylesheet ein.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Syntax

stylesheet.insertRule(regel, index)

Folgende Parameter sind nötig:

  • regel: bestehend aus einem DOM-String, der den Selektor und die Festlegung beinhaltet.
  • index: ganze Zahl, an welcher Stelle die Festlegung eingefügt werden soll.
    Empfehlung: Wenn Sie bestehende Regeln überschreiben wollen, benötigen Sie einen anderen Wert als 0.
Beispiel
  sheet.insertRule("#über { background: #c32e04; color: white; }", 1);
Empfehlung: Da Sie immer nur eine Regel einfügen können, empfiehlt es sich bei größeren Änderungen eine @media -Regel einzufügen:
Beispiel
  sheet.insertRule("@media all { Selektor1 { Regel : Wert } Selektor2 { Regel : Wert} }", 1);

Anwendungsbeispiel[Bearbeiten]

CSS-Regelsatz hinzufügen ansehen …
function changeStylez() {
  var sheet = document.styleSheets[0];
  sheet.insertRule("#über { background: #c32e04; color: white; }", 1);
}


CSSStyleDeclaration[Bearbeiten]

CSS-Variablen mit setProperty() setzen[Bearbeiten]

Im Tutorial "Einstieg in SVG" gibt eine mit CSS-animation angetriebene SVG-Uhr. Damit sie die aktuelle Uhrzeit anzeigt, wird mittels setProperty() die aktuelle Zeit den CSS-Variablen zugewiesen.

Zeitabfrage in JavaScript ansehen …
document.addEventListener('DOMContentLoaded', function () {
	  
  const svg = document.querySelector('svg');
  const currentTime = new Date();

  svg.style.setProperty('--start-seconds', currentTime.getSeconds());
  svg.style.setProperty('--start-minutes', currentTime.getMinutes());
  svg.style.setProperty('--start-hours', currentTime.getHours() % 12);
});

Das Script beinhaltet einen Eventlistener, der nach dem Laden der Webseite mit new Date() ein neues Datumsobjekt mit der aktuellen Zeit (engl. currentTime) erzeugt.

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

  1. google.developers: css-object-model-cssom