我正在寻找一种方法,将一个<style>标签插入到一个HTML页面与JavaScript。

目前为止我发现的最好的方法是:

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

这适用于Firefox, Opera和Internet Explorer,但不适用于谷歌Chrome。而且,对于IE来说,前面的<br>有点难看。

有人知道如何创建<style>标签吗

是更好的 工作与Chrome?

或者

这是我应该避免的不规范的事情 三个可用的浏览器都很棒,谁会用Chrome呢?


当前回答

下面是一个脚本,它将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;');

其他回答

任何正在寻找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直接注入一个新的样式表。欲了解更多信息,请参考本文档。

更新

你可以用document。以及@Brandon McConnell的评论。

下面是动态添加类的一个变体

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

document.head.innerHTML += ' <时尚> h1 { 颜色:红色; } p { 颜色:蓝色; } > < /风格的 <标题>我是红色的!< / h1 > < p >我是蓝色!< / p >

到目前为止最直接的解决方案。您所要做的就是像通常声明样式标签一样,在反勾号之间输入

试着把风格元素添加到头部而不是身体。

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

这个对象变量将把style标签附加到带有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();