Question

有没有办法通过javascript将jss文件中的字符串中的css添加到文档的头部？

假设我们有一个网页，它有一个灯箱脚本，这个脚本需要一个css文件来运行。

现在使用<link>添加此css文件将使css文件下载，即使对于未启用js的人也是如此。

我知道我可以使用脚本动态加载css文件，但这也意味着将有2个http请求，并且在文件中几乎没有css的情况下，我发现效率低下。

所以我想，如果你可以将css文件中的css放入脚本中，让脚本解析css并将其添加到头部，或者更好的是让脚本添加css直接进入文档的<head>。

但我在网上找不到任何暗示这是可能的，所以有可能用js将css添加到头部吗？

编辑+解决方案：

我编辑了roryf的跨浏览器工作答案（IE5除外）

使用Javascript：

 function addcss(css){
    var head = document.getElementsByTagName('head')[0];
    var s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    if (s.styleSheet) {   // IE
        s.styleSheet.cssText = css;
    } else {                // the world
        s.appendChild(document.createTextNode(css));
    }
    head.appendChild(s);
 }

Answer 1

编辑：正如Atspulgs评论建议的那样，你可以使用querySelector在没有jQuery的情况下实现相同的目标：

document.querySelector('head').innerHTML += '<link rel="stylesheet" href="styles.css" type="text/css"/>';

以下较旧的答案。

您可以使用jQuery库来选择头部元素并将HTML附加到其中，方式如下：

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

您可以找到此问题的完整教程here

Answer 2

如果您不想依赖javascript库，可以使用document.write()将所需的css（包含在style标记中）直接发送到文档head中：

<head>
  <script type="text/javascript">
    document.write("<style>body { background-color:#000 }</style>");
  </script>
  # other stuff..
</head>

这样可以避免触发额外的HTTP请求。

已经建议/添加/删除了其他解决方案，但我没有看到过度复杂的跨浏览器已经正常工作的任何一点。祝你好运！

http://jsbin.com/oqede3/edit

Answer 3

当您尝试使用JavaScript向<head>添加一串CSS时？将一串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>元素的所有怪癖或直接访问样式表简单得多。

var linkElement = 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向上工作

您标记的解决方案将起作用，但此解决方案需要更少的dom操作且只需要一个元素。

Answer 4

一个简单的非jQuery解决方案，虽然对IE有点破解：

var css = ".lightbox { width: 400px; height: 400px; border: 1px solid #333}";

var htmlDiv = document.createElement('div');
htmlDiv.innerHTML = '<p>foo</p><style>' + css + '</style>';
document.getElementsByTagName('head')[0].appendChild(htmlDiv.childNodes[1]);

似乎IE不允许在innerText元素上设置innerHTML，appendChild或使用style。这是一个bug report来证明这一点，虽然我认为它错误地识别了问题。上面的解决方法来自对错误报告的评论，并已在IE6和IE9中进行了测试。

无论你使用它，document.write还是更复杂的解决方案都将取决于你的情况。

Answer 5

这是一个可以在所有主流浏览器中动态创建CSS规则的函数。 createCssRule采用选择器（例如“p.purpleText”），规则（例如“color：purple;”）和可选的Document（默认使用当前文档）：

var addRule;

if (typeof document.styleSheets != "undefined" && document.styleSheets) {
    addRule = function(selector, rule) {
        var styleSheets = document.styleSheets, styleSheet;
        if (styleSheets && styleSheets.length) {
            styleSheet = styleSheets[styleSheets.length - 1];
            if (styleSheet.addRule) {
                styleSheet.addRule(selector, rule)
            } else if (typeof styleSheet.cssText == "string") {
                styleSheet.cssText = selector + " {" + rule + "}";
            } else if (styleSheet.insertRule && styleSheet.cssRules) {
                styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length);
            }
        }
    }
} else {
    addRule = function(selector, rule, el, doc) {
        el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
    };
}

function createCssRule(selector, rule, doc) {
    doc = doc || document;
    var head = doc.getElementsByTagName("head")[0];
    if (head && addRule) {
        var styleEl = doc.createElement("style");
        styleEl.type = "text/css";
        styleEl.media = "screen";
        head.appendChild(styleEl);
        addRule(selector, rule, styleEl, doc);
        styleEl = null;
    }
};

createCssRule("body", "background-color: purple;");

Answer 6

这是一种简单的方法。

/**
 * Add css to the document
 * @param {string} css
 */
function addCssToDocument(css){
  var style = document.createElement('style')
  style.innerText = css
  document.head.appendChild(style)
}

Answer 7

一次通话：

document.head.appendChild(Object.assign(document.createElement("style"), {textContent: `
    select, button, input, details, summary { cursor: pointer }
    input { padding: 0.5rem }
    button, select  { margin: 0.5rem }
    @media (max-width:640px) { button  { width: 100% } i {display: block } }
  `
}))

使用JavaScript添加CSS？

编辑+解决方案：

7 个答案: