通过JavaScript将类似HTML的CSS注入DOM

Question

我想知道是否可以像通过JavaScript添加HTML代码那样将CSS代码添加为字符串，例如：

var div = document.createElement("div");
div.innerHTML =
  '<div id="hs1"></div>\n' +
  '<div id="hs2"></div>\n' +
  '<div id="hs3"></div>\n'

document.body.appendChild(div);

我可以用类似的方式添加一个巨大的CSS代码吗？

基本上我有HTML + CSS + JS代码，我想放入.js文件而不是.html 。 我是Web开发的新手，所以不知道。 这有可能吗？

Answer 1

您可以通过原始JavaScript注入CSS：

• 创建样式元素
• 使用CSS将其内容设置为您的字符串
• 将样式元素添加到DOM的头部

示例1（也适用于较旧的浏览器）：

 // get the head and create a style element var head = document.head || document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css'; // create your CSS as a string var css = '.my-element { color: white; background: cornflowerblue; }'; // IE8 and below. if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } // add it to the head head.appendChild(style); 

 <div class="my-element">Text</div> 

示例2（对于较新的浏览器）：

 // create a style element var style = document.createElement('style'); // add the CSS as a string style.innerHTML = '.my-element { color: white; background: cornflowerblue; }'; // add it to the head document.getElementsByTagName('head')[0].appendChild(style); 

 <div class="my-element">Text</div> 

示例3（ES6）：

 // create a style element const style = document.createElement('style'); // add the CSS as a string using template literals style.appendChild(document.createTextNode(` .my-element { color: white; background: cornflowerblue; }` )); // add it to the head const head = document.getElementsByTagName('head')[0]; head.appendChild(style); 

 <div class="my-element">Text</div> 

Answer 2

是的，您是否尝试过创建<style>标签，使用规则填充它并注入它？

 const style = document.createElement("style"); style.innerHTML = "#foo{background-color: green;}"; document.head.appendChild(style); 

 <div id="foo">Foo bar</div> 

Answer 3

您是否曾尝试过？

 document.getElementById('myButton').onclick = function() { var sc = document.createElement('style'); sc.innerHTML = "#myDiv { padding: 10px; border: 1px dashed blue; }"; document.getElementById('myDiv').appendChild( sc ); } 

 <div id="myDiv"> Test 123 </div> <button id="myButton">Click Me!</button> 

如果您有GIANT CSS文件。 最好加载文件本身。 您可以像上面一样创建style标签，并设置href属性以加载它。

Answer 4

您可以使用CSSStyleSheet接口来处理样式表。 下面的示例向您展示如何操作现有样式表。 使用此方法，您可以指定插入规则的位置，而不必始终在结尾处附加：

 document.querySelector("#button-1").addEventListener("click", function() { var sheet = document.querySelector("style").sheet; var color = "rgb(" + Math.floor(Math.random() * 256) + ", " + Math.floor(Math.random() * 256) + ", " + Math.floor(Math.random() * 256) + ")"; sheet.insertRule("p { background-color: " + color + "; }", sheet.cssRules.length); }); 

 /* this stylesheet intentionally left blank */ 

 <button id="button-1">Modify Stylesheet</button> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum urna risus, non finibus sem fermentum eget. In at libero a justo molestie semper. Praesent sit amet massa justo. Donec aliquet lobortis justo tincidunt ultrices.</p>