使用CSS添加CSS？

一尘不染

使用CSS添加CSS？

css

有没有办法将javascript文件中的字符串中的css添加到使用javascript的文档的开头？

假设我们有一个网页，其中包含一个灯箱脚本，该脚本需要一个css文件才能运行。

现在，添加此css文件<link>将使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);
 }

阅读 303

2020-05-16

共1个答案

一尘不染

当您尝试<head>使用JavaScript
向其中添加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" />

您只需在URL中对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操作，并且只需要一个元素。

2020-05-16