Heim > Artikel > Web-Frontend > Wie füge ich ein CSS-Stylesheet als String mit JavaScript ein?
CSS-Stylesheet als String mit JavaScript einfügen
Die Verbesserung des Erscheinungsbilds von Webseiten ist für die Benutzerinteraktion und -anpassung von entscheidender Bedeutung. In diesem Zusammenhang entsteht die Herausforderung, wenn Sie CSS-Stile mithilfe von JavaScript dynamisch einfügen müssen, insbesondere wenn es um Browsererweiterungen geht, die die Möglichkeit erfordern, den Stil ihrer internen Seiten zu ändern.
Für solche Szenarien ist eine einfache und Ein effektiver Ansatz besteht darin, die Eigenschaft textContent des HTML-Elements zu nutzen. Durch das Erstellen eines neuen Stilelements, das Festlegen seines Textinhalts mit den gewünschten CSS-Regeln und das Anhängen an den Dokumentkopf können Entwickler ein vollständiges Stylesheet in die Seite einfügen.
Hier ist ein Beispiel:
<code class="javascript">function addStyle(styleString) { const style = document.createElement('style'); style.textContent = styleString; document.head.append(style); } addStyle(` body { color: red; } `); addStyle(` body { background: silver; } `);</code>
Diese Technik fügt nacheinander die bereitgestellten CSS-Regeln ein, sodass der Entwickler nach Bedarf mehrere Stile definieren kann.
Alternativ kann ein etwas anderer Ansatz mit einem Abschluss das vorhandene CSS-Stylesheet bei jedem nachfolgenden Aufruf von addStyle-Funktion:
<code class="javascript">const addStyle = (() => { const style = document.createElement('style'); document.head.append(style); return (styleString) => style.textContent = styleString; })(); addStyle(` body { color: red; } `); addStyle(` body { background: silver; } `);</code>Es ist wichtig zu beachten, dass diese Methode in bestimmten Browserversionen, insbesondere in älteren Versionen von Internet Explorer, möglicherweise die maximal zulässige Anzahl von Stylesheets erreicht. In solchen Fällen ist die Verwendung des ersten Ansatzes besser geeignet.Durch die Nutzung der Eigenschaft
textContent des Elements