Wie erstellt man einen <style>-Tag mit Javascript?

Question

Wie erstellt man einen <style>-Tag mit Javascript?

Gefragt el 7 de Februar, 2009: Wann wurde die Frage gestellt
402534 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich suche nach einer Möglichkeit, eine <style> Tag in eine HTML-Seite mit JavaScript einfügen.

Das ist der beste Weg, den ich bisher gefunden habe:

var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);

Dies funktioniert in Firefox, Opera und Internet Explorer, aber nicht in Google Chrome. Außerdem ist es ein bisschen hässlich mit dem <br> vorne für IE.

Kennt jemand eine Möglichkeit zur Erstellung eines <style> Tag, der

Ist netter
Funktioniert mit Chrome?

Oder vielleicht

Dies ist eine unübliche Sache, die ich vermeiden sollte
Drei funktionierende Browser sind großartig, und wer benutzt schon Chrome?

Gefragt el 7 de Februar, 2009 von Nicht registrierter Benutzer

Answer 1

5 Antworten

Answer 2

5voto

Tony Punkte 41

Alles gut, aber für styleNode.cssText in IE6 mit Knoten erstellt von javascipt zu arbeiten, müssen Sie den Knoten an das Dokument anhängen, bevor Sie den cssText festgelegt;

weitere Infos @ http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx

Beantwortet el 25 de Februar, 2010 von Tony (41 Punkte )

Answer 3

5voto

7vujy0f0hy Punkte 7302

Sie haben geschrieben:

var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);

Warum nicht das?

var styleNode = document.createElement("style");
document.head.appendChild(styleNode);

Von nun an können Sie CSS-Regeln einfach an den HTML-Code anhängen:

styleNode.innerHTML = "h1 { background: red; }\n";
styleNode.innerHTML += "h2 { background: green; }\n";

...oder direkt zum DOM:

styleNode.sheet.insertRule("h1 { background: red; }");
styleNode.sheet.insertRule("h2 { background: green; }");

Ich erwarte, dass dies überall funktioniert, außer in archaischen Browsern.

Funktioniert auf jeden Fall in Chrome im Jahr 2019.

Beantwortet el 8 de Januar, 2019 von 7vujy0f0hy (7302 Punkte )

Answer 4

3voto

Joel Ellis Punkte 1094

Diese Funktion wird css einfügen, wenn Sie die Funktion aufrufen appendStyle wie diese:
appendStyle('css you want to inject')

Dies funktioniert durch die Injektion eines style Knoten in den Kopf des Dokuments. Dies ist eine ähnliche Technik, wie sie für das Lazy-Loading von JavaScript verwendet wird. Sie funktioniert in den meisten modernen Browsern einheitlich.

appendStyle = function (content) {
  style = document.createElement('STYLE');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(content));
  document.head.appendChild(style);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>Lorem Ipsum</h1>
  <p>dolar sit amet</p>
  <button onclick='appendStyle("body { background-color: #ff0000;}h1 { font-family: Helvetica, sans-serif; font-variant: small-caps; letter-spacing: 3px; color: #ff0000; background-color: #000000;}p { font-family: Georgia, serif; font-size: 14px; font-style: normal; font-weight: normal; color: #000000; background-color: #ffff00;}")'>Press me to inject CSS!</button>
</body>

</html>

Sie können auch externe CSS-Dateien nachladen, indem Sie das folgende Snippet verwenden:

appendExternalStyle = function (content) {
  link = document.createElement('LINK');
  link.rel = 'stylesheet';
  link.href = content;
  link.type = 'text/css';
  document.head.appendChild(link);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    html {
      font-family: sans-serif;
      font-display: swap;
    }
  </style>
</head>

<body>

  <h1>Lorem Ipsum</h1>
  <p>dolar sit amet</p>
  <button onclick='appendExternalStyle("data:text/css;base64,OjotbW96LXNlbGVjdGlvbntjb2xvcjojZmZmIWltcG9ydGFudDtiYWNrZ3JvdW5kOiMwMDB9OjpzZWxlY3Rpb257Y29sb3I6I2ZmZiFpbXBvcnRhbnQ7YmFja2dyb3VuZDojMDAwfWgxe2ZvbnQtc2l6ZToyZW19Ym9keSxodG1se2NvbG9yOnJnYmEoMCwwLDAsLjc1KTtmb250LXNpemU6MTZweDtmb250LWZhbWlseTpMYXRvLEhlbHZldGljYSBOZXVlLEhlbHZldGljYSxzYW5zLXNlcmlmO2xpbmUtaGVpZ2h0OjEuNjd9YnV0dG9uLGlucHV0e292ZXJmbG93OnZpc2libGV9YnV0dG9uLHNlbGVjdHstd2Via2l0LXRyYW5zaXRpb24tZHVyYXRpb246LjFzO3RyYW5zaXRpb24tZHVyYXRpb246LjFzfQ==")'>press me to inject css!</button>
</body>

</html>

Beantwortet el 29 de Kann, 2018 von Joel Ellis (1094 Punkte )

Answer 5

2voto

defend orca Punkte 403

Wie ich weiß, gibt es 4 Möglichkeiten, dies zu tun.

var style= document.createElement("style");
(document.head || document.documentElement).appendChild(style);
var rule=':visited {    color: rgb(233, 106, 106) !important;}';

//no 1
style.innerHTML = rule;
//no 2
style.appendChild(document.createTextNode(rule));

//no 3 limited with one group
style.sheet.insertRule(rule);
//no 4 limited too
document.styleSheets[0].insertRule('strong { color: red; }');

//addon
style.sheet.cssRules //list all style
stylesheet.deleteRule(0)  //delete first rule

Beantwortet el 9 de Oktober, 2020 von defend orca (403 Punkte )

Answer 6

1voto

moefinley Punkte 1178

Wenn das Problem, dem Sie gegenüberstehen, darin besteht, eine CSS-Zeichenkette in eine Seite zu injizieren, ist es einfacher, dies mit der <link> Element als das <style> Element.

Das Folgende wird hinzugefügt p { color: green; } Regel auf der Seite.

<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8,p%20%7B%20color%3A%20green%3B%20%7D" />

Sie können dies in JavaScript erstellen, indem Sie einfach Ihre CSS-Zeichenfolge in URL kodieren und sie in die HREF Attribut. Viel einfacher als all die Macken von <style> Elemente oder den direkten Zugriff auf Stylesheets.

let linkElement: HTMLLinkElement = this.document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(myStringOfstyles));

Dies funktioniert in IE 5.5 aufwärts

Beantwortet el 19 de April, 2018 von moefinley (1178 Punkte )

Wie erstellt man einen <style>-Tag mit Javascript?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie erstellt man einen <style>-Tag mit Javascript?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: