Ich suche nach einer Möglichkeit, ein <style>
-Tag mit JavaScript in eine HTML-Seite einzufügen.
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, jedoch nicht in Google Chrome. Auch mit dem <br>
vor dem IE ist es etwas hässlich.
Kennt jemand eine Möglichkeit, ein <style>
-Tag zu erstellen
Ist schöner
Funktioniert mit Chrome?
Oder vielleicht
Dies ist eine nicht standardmäßige Sache, die ich vermeiden sollte
Drei funktionierende Browser sind großartig und wer verwendet Chrome eigentlich?
Fügen Sie das style
-Element statt der head
zur body
hinzu.
Dies wurde in IE (7-9), Firefox, Opera und Chrome getestet:
var css = 'h1 { background: red; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
// This is required for IE8 and below.
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
Hier ist ein Skript, das den Browsern, denen diese nicht zur Verfügung stehen, die IE-style createStyleSheet()
und addRule()
Methoden hinzufügt:
if(typeof document.createStyleSheet === 'undefined') {
document.createStyleSheet = (function() {
function createStyleSheet(href) {
if(typeof href !== 'undefined') {
var element = document.createElement('link');
element.type = 'text/css';
element.rel = 'stylesheet';
element.href = href;
}
else {
var element = document.createElement('style');
element.type = 'text/css';
}
document.getElementsByTagName('head')[0].appendChild(element);
var sheet = document.styleSheets[document.styleSheets.length - 1];
if(typeof sheet.addRule === 'undefined')
sheet.addRule = addRule;
if(typeof sheet.removeRule === 'undefined')
sheet.removeRule = sheet.deleteRule;
return sheet;
}
function addRule(selectorText, cssText, index) {
if(typeof index === 'undefined')
index = this.cssRules.length;
this.insertRule(selectorText + ' {' + cssText + '}', index);
}
return createStyleSheet;
})();
}
Sie können externe Dateien über hinzufügen
document.createStyleSheet('foo.css');
und dynamisch Regeln erstellen über
var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');
Ich gehe davon aus, dass Sie ein style
-Tag und ein link
-Tag einfügen möchten (das auf ein externes CSS verweist).
<html>
<head>
<title>Example Page</title>
</head>
<body>
<span>
This is styled dynamically via JavaScript.
</span>
</body>
<script type="text/javascript">
var styleNode = document.createElement('style');
styleNode.type = "text/css";
// browser detection (based on prototype.js)
if(!!(window.attachEvent && !window.opera)) {
styleNode.styleSheet.cssText = 'span { color: rgb(255, 0, 0); }';
} else {
var styleText = document.createTextNode('span { color: rgb(255, 0, 0); } ');
styleNode.appendChild(styleText);
}
document.getElementsByTagName('head')[0].appendChild(styleNode);
</script>
</html>
In Ihrer Frage ist mir auch aufgefallen, dass Sie innerHTML
verwenden. Dies ist eigentlich eine nicht standardisierte Methode zum Einfügen von Daten in eine Seite. Am besten erstellen Sie einen Textknoten und hängen ihn an einen anderen Elementknoten an.
In Bezug auf Ihre letzte Frage hören Sie einige Leute sagen, dass Ihre Arbeit in allen Browsern funktionieren sollte. Es hängt alles von Ihrem Publikum ab. Wenn niemand in Ihrem Publikum Chrome verwendet, dann schwitzen Sie es nicht. Wenn Sie jedoch das größtmögliche Publikum erreichen möchten, sollten Sie alle großen Browser der Klasse A unterstützen
Ein Beispiel, das funktioniert und mit allen Browsern kompatibel ist:
var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);
$('<style>'+ styles +'</style>').appendTo(document.head);
Häufig müssen vorhandene Regeln überschrieben werden, sodass das Anhängen neuer Stile an HEAD nicht in jedem Fall funktioniert.
Ich habe mir diese einfache Funktion ausgedacht, die alle nicht gültig "An den BODY anhängen" -Ansätze zusammenfasst und einfach zu benutzen und zu debuggen ist (IE8 +).
window.injectCSS = (function(doc){
// wrapper for all injected styles and temp el to create them
var wrap = doc.createElement('div');
var temp = doc.createElement('div');
// rules like "a {color: red}" etc.
return function (cssRules) {
// append wrapper to the body on the first call
if (!wrap.id) {
wrap.id = 'injected-css';
wrap.style.display = 'none';
doc.body.appendChild(wrap);
}
// <br> for IE: http://goo.gl/vLY4x7
temp.innerHTML = '<br><style>'+ cssRules +'</style>';
wrap.appendChild( temp.children[1] );
};
})(document);
Hier ist eine Variante zum dynamischen Hinzufügen einer Klasse
function setClassStyle(class_name, css) {
var style_sheet = document.createElement('style');
if (style_sheet) {
style_sheet.setAttribute('type', 'text/css');
var cstr = '.' + class_name + ' {' + css + '}';
var rules = document.createTextNode(cstr);
if(style_sheet.styleSheet){// IE
style_sheet.styleSheet.cssText = rules.nodeValue;
} else {
style_sheet.appendChild(rules);
}
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(style_sheet);
}
}
}
Alles in Ordnung, aber damit styleNode.cssText in IE6 mit einem von javascipt erstellten Knoten funktioniert, müssen Sie den Knoten an das Dokument anhängen, bevor Sie den cssText festlegen.
weitere Informationen @ http://msdn.Microsoft.com/de-de/library/ms533698%28VS.85%29.aspx
Diese Objektvariable fügt dem head-Tag ein style-Tag mit type-Attribut und einer einfachen Übergangsregel darin hinzu, die jeder einzelnen id/class/element entspricht. Fühlen Sie sich frei, um content property zu ändern und so viele Regeln einzufügen, wie Sie benötigen. Stellen Sie nur sicher, dass die css-Regeln in content in einer Zeile verbleiben (oder "escape" jeder neuen Zeile, wenn Sie dies bevorzugen).
var script = {
type: 'text/css', style: document.createElement('style'),
content: "* { transition: all 220ms cubic-bezier(0.390, 0.575, 0.565, 1.000); }",
append: function() {
this.style.type = this.type;
this.style.appendChild(document.createTextNode(this.content));
document.head.appendChild(this.style);
}}; script.append();
Diese Funktion fügt css automatisch ein, wenn Sie die Funktion appendStyle wie folgt aufrufen: appendstyle('css you want to inject')
. Dies funktioniert, indem ein style
-Knoten in den Kopf des Dokuments eingefügt wird. Dies ist eine ähnliche Technik wie bei der Verwendung von Lazy-Load-Javascript. es funktioniert in den meisten Browsern konsistent.
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>this is injected css</h1>
<p>heloo, this is stuff, hkasjdhakhd</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>
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>this is injected css</h1>
<p>heloo, this is stuff, hkasjdhakhd</p>
<button onclick='appendExternalStyle("data:text/css;base64,OjotbW96LXNlbGVjdGlvbntjb2xvcjojZmZmIWltcG9ydGFudDtiYWNrZ3JvdW5kOiMwMDB9OjpzZWxlY3Rpb257Y29sb3I6I2ZmZiFpbXBvcnRhbnQ7YmFja2dyb3VuZDojMDAwfWgxe2ZvbnQtc2l6ZToyZW19Ym9keSxodG1se2NvbG9yOnJnYmEoMCwwLDAsLjc1KTtmb250LXNpemU6MTZweDtmb250LWZhbWlseTpMYXRvLEhlbHZldGljYSBOZXVlLEhlbHZldGljYSxzYW5zLXNlcmlmO2xpbmUtaGVpZ2h0OjEuNjd9YnV0dG9uLGlucHV0e292ZXJmbG93OnZpc2libGV9YnV0dG9uLHNlbGVjdHstd2Via2l0LXRyYW5zaXRpb24tZHVyYXRpb246LjFzO3RyYW5zaXRpb24tZHVyYXRpb246LjFzfQ==")'>press me to inject css!</button>
</body>
</html>
var list = document.querySelector("head");
list.innerHTML += '<style>
h3.header-6.basket-item--header
span.cusplus {
color:#c00;
}.
cusname{
color:grey;font-size:14px;
}
</style>';
200% Arbeitscode, Beispiel oben
Sie schrieben:
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);
Daher 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 bei archaischen Browsern.
Funktioniert definitiv in Chrome im Jahr 2019.
Wenn das Problem, mit dem Sie konfrontiert sind, einen CSS-String in eine Seite einfügt, ist dies mit dem Element <link>
einfacher als mit dem Element <style>
.
Im Folgenden wird der Seite eine p { color: green; }
-Regel hinzugefügt.
<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 die CSS-Zeichenfolge mit einer URL kodieren und das Attribut HREF
hinzufügen. Viel einfacher als alle Eigenheiten von <style>
-Elementen oder direkter 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
this link may helpful to you: