Question

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

到目前为止我发现的最佳方式：

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>也有点难看。

是否有人知道如何创建<{1}}标记

更好
适用于Chrome？

或者

这是我应该避免的非标准事项
三种工作浏览器都很棒，无论如何都使用Chrome？

Answer 1

尝试将style元素添加到head而不是body。

这在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));
}

Answer 2

这是一个脚本，它将IE风格的createStyleSheet()和addRule()方法添加到没有它们的浏览器中：

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

您可以通过

添加外部文件

document.createStyleSheet('foo.css');

并通过

动态创建规则

var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');

Answer 3

我假设您要插入style标记而不是link标记（引用外部CSS），这就是以下示例所做的事情：

<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>

此外，我在您的问题中注意到您使用的是innerHTML。这实际上是一种将数据插入页面的非标准方式。最佳做法是创建一个文本节点并将其附加到另一个元素节点。

关于你的最后一个问题，你会听到有些人说你的工作应该适用于所有浏览器。这一切都取决于你的观众。如果您的观众中没有人使用Chrome，那么请不要冒汗;但是，如果您希望尽可能覆盖最大的受众群体，那么最好支持所有主要的A级浏览器

Answer 4

一个有效且符合所有浏览器的示例：

var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);

Answer 5

对于那些已经使用 jQuery 的人，您可以使用这个单行：

$('<style>'+ styles +'</style>').appendTo(document.head);

Answer 6

通常需要覆盖现有规则，因此在HEAD中添加新样式并不适用于每种情况。

我想出了这个简单的功能，它总结了所有无效＆＃34;附加到BODY＆＃34;方法，使用和调试更方便（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);

演示：codepen，jsfiddle

Answer 7

以下是动态添加类

的变体

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);
    }
  }
}

Answer 8

一切都很好，但是对于使用javascipt创建的节点在IE6中工作的styleNode.cssText，您需要在设置cssText之前将节点附加到文档;

进一步信息@ http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx

Answer 9

此对象变量将样式标记附加到具有type属性的head标记，并且其中一个简单的转换规则匹配每个id / class /元素。您可以随意修改内容属性，并根据需要注入尽可能多的规则。只需确保内容中的css规则保留在一行中（或者如果您愿意，可以“转义”每个新行）。

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();

Answer 10

每当你调用函数appendStyle时，这个函数会语法注入css，如下所示： appendstyle('css you want to inject')。这可以通过将style节点注入文档的头部来实现。这是一种类似于人们用来懒惰加载javascript的技术。它在大多数浏览器中都能保持一致。

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>

您还可以使用以下代码段延迟加载外部CSS文件：

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>

Answer 11

如果您遇到的问题是在页面中插入一串CSS，则<link>元素比<style>元素更容易执行此操作。

以下内容将p { color: green; }规则添加到页面中。

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

您只需通过对您的CSS字符串进行编码并将HREF属性添加到其中，即可在JavaScript中创建此内容。比<style>元素的所有怪癖或直接访问样式表简单得多。

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));

这将在IE 5.5向上工作

Answer 12

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％的工作代码，例如上述示例

Answer 13

您写道：

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

为什么不呢？

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

因此，您可以轻松将CSS规则附加到HTML代码：

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

...或直接指向DOM：

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

我希望这可以在除旧版浏览器之外的所有地方使用。

绝对可以在2019年在Chrome 中使用。

Answer 14

this link may helpful to you:

http://jonraasch.com/blog/javascript-style-node

Answer 15

据我所知，有四种方法可以做到这一点。

class profile::software::apache (
  $php_version    = '7.4',
  $php_remove     = ['7.0‘, ‘7.3'],
  #...
) {

$myPackages = [
    "php$php_version-xml",
    "php$php_version-zip",
    "php$php_version-curl",
    "php$php_version-mbstring",
    "libapache2-mod-php$php_version",
  ]

ensure_packages($myPackages,
    {
      'ensure' => 'present',
    }
  )

  $php_remove.each | String $php_version | { 
    ensure_packages($myPackages,
      {
        'ensure' => 'absent',
      }
    )
   }
}

Answer 16

任何正在寻找 Typescript 版本的人，

const addStyles = (styles) => {
  let styleNode : HTMLStyleElement = document.createElement('style'); 
  styleNode.type = 'text/css'; 
  if (styleNode.style)  
    styleNode.style.cssText = styles; 
  else  
    styleNode.appendChild(document.createTextNode(styles)); 
        
  /* Append style to the head element */ 
  document.head.appendChild(styleNode);  
}

另外，在react/vue/angular中如果需要直接注入CSS，可以使用posstcss-js将CSS转成JSS并使用CSS-in-JSS > 直接注入一个新的样式表。如需更多信息，请关注此documentation。

更新

您可以使用 document.head 以及@Brandon McConnell 的评论。

Answer 17

最简单的答案：

function addStyle (styleText) {
  const styleNode = document.createElement('style'); 
  styleNode.type = 'text/css'; 
  styleNode.textContent = styleText;
  document.documentElement.appendChild(styleNode);  
  return styleNode;
}

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

17 个答案:

对于那些已经使用 jQuery 的人，您可以使用这个单行：