通过JavaScript将类似HTML注入到DOM中
通过JavaScript将类似HTML注入到DOM中
提问于 2018-06-27 03:57:50
我想知道我是否可以像通过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代码吗？
基本上我有超文本标记语言+ CSS + JS代码，我想放入一个.js文件，而不是一个.html。我是web开发的新手，所以我不知道。这有可能吗？
回答 2
Stack Overflow用户
发布于 2018-06-27 04:02:54
是的，你有没有尝试过创建一个<style>标签，用规则填充它，然后注入它？
const style = document.createElement("style");
style.innerHTML = "#foo{background-color: green;}";
document.head.appendChild(style);<div id="foo">Foo bar</div>
Stack Overflow用户
发布于 2018-06-27 04:28:45
您可以使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51050533
复制相关文章
相似问题