如何使用Javascript创建<style>标签？

javascript html css

2022-08-29 23:25:09

我正在寻找一种使用JavaScript将标签插入HTML页面的方法。<style>

到目前为止，我发现的最好的方法：

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

这适用于Firefox，Opera和Internet Explorer，但不适用于Google Chrome。另外，IE的前面有点丑陋。<br>

有没有人知道一种方法来创建一个标签<style>

更好
与 Chrome 配合使用？

或者也许

这是一个非标准的事情，我应该避免
三种工作浏览器都很棒，谁使用Chrome呢？

答案 1

尝试将元素添加到而不是 .styleheadbody

这在IE（7-9），Firefox，Opera和Chrome中进行了测试：

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

head.appendChild(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));
}

答案 2

<style>标记应放置在元素内，并且每个添加的标记都应添加到标记的底部。<head><head>

使用 insertAdjacentHTML 将样式标记注入到文档 head 标记中：

本机 DOM：

document.head.insertAdjacentHTML("beforeend", `<style>body{background:red}</style>`)

jQuery：

$('<style>').text("body{background:red}").appendTo(document.head)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>