有没有办法将css从javascript文件中的字符串添加到带有javascript的文档头?

假设我们有一个网页,它有一个lightbox脚本,这个脚本需要一个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);
 }

推荐答案

当你试图用JavaScript向<head>添加一串CSS时?

下面将向页面添加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字符串进行URL编码并将其添加到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操作,并且只需要单个元素.

Css相关问答推荐

包含 N 个 React 组件的砌体网格

测试响应式设计:手动拖动浏览器窗口与使用设备工具栏

如何有条件地设置元素的字体大小,只有在未明确设置父字体大小(即字体大小为继承)的情况下?

为什么我的 CSS 转换在 React 18 中不起作用

更改 20 个实例中的一个组件的样式

问题定位位置:Tailwindcss 中的绝对元素

使用 display:inline-block 渲染多行文本组件,行间有白色间隙

带填充的水平边框

适合剩余高度

使用 Flex Box Tailwind CSS 的元素不相等

我怎样才能在某些区域制作一个单独的文本行,而在其他区域制作一个实心填充?

css显示:表格不显示边框

在整个 DIV 周围添加 CSS 框阴影

绝对位置和溢出:隐藏

如何更改 CSS:JavaScript 中的根 colored颜色 变量

在 Firefox 中删除额外的按钮间距/填充

最大宽度与最小宽度

如何在 javascript 中获取 HTML 元素的样式值?

如何从标题中删除粗体?

如何将文本向左旋转 90 度并根据 html 中的文本调整单元格大小