javascript - js创建标签 - 原生js添加元素




如何用Javascript创建一个<style>标签 (7)

对于那些已经使用jQuery的人 ，你可以使用这一行： 

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

我正在寻找一种将<style>标签插入到带有JavaScript的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来说，前面的代码有点丑陋。

有谁知道创建<style>标签的方法

  1. 更好

  2. 适用于Chrome？

或者可能

  1. 这是我应该避免的非标准事情

  2. 三个工作的浏览器是伟大的，谁使用Chrome呢？

一个适用于所有浏览器的示例： 

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

下面是一个脚本，它向不具有它们的浏览器添加了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;');

如果您遇到的问题是在页面中注入一串CSS，则使用<link>元素比<style>元素更容易。

以下添加p { color: green; } 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以上工作

我假设你想插入一个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级浏览器

这个对象变量会将样式标签附加到头标签中，并且使用类型属性和一个简单的过渡规则来匹配每个单独的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();

通常需要覆盖现有的规则，因此在HEAD中添加新的样式在每种情况下都不起作用。

我想出了这个简单的函数，它总结了所有无效的 “附加到BODY”方法，并且更方便使用和调试（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




原生js添加元素   js创建标签   javascript   html   css  


css