如何通过JavaScript在自定义CSS文件中创建类？

Question

我想在运行时使用JavaScript创建CSS类并写入自定义CSS文件。

现在，我编写了代码（请参见下文）并创建了我的类，但是我不知道如何在CSS文件中创建它。

 var sheet = document.createElement('style') sheet.innerHTML = ".context-menu-icon-case1:before{content: url(progressbar.png);}"; document.body.appendChild(sheet);

它在当前页面中创建CSS类，但我想在自定义css文件中创建它。

Answer 1

你不能 对不起。 好消息是您不需要。 通过Javascript插入CSS与从css文件读取相同。

Answer 2

您可以使用XMLHttpRequest()或fetch()来请求现有的.css文件，而不是将文件加载到html ，也可以将新的样式规则附加到XMLHttpRequest.responseText或response.text()的.css文件中，或者使用FileReader 。

创建一个Blob或File对象，或将新css文本的编码文本表示形式追加到现有文件中，创建一个<link>元素，并将rel属性设置为stylesheet ，将href属性设置为objectURL ，将data URI或已创建文件的编码文本追加到link到document.head元素。

<head>
  <script>
    var cssupdate = `.context-menu-icon-case1:before {
                       content: url(progressbar.png);
                    }`;
    var cssfile = "style.css";
    fetch(cssfile)
    .then(response => response.text())
    .then(currentcss => {
      var css = currentcss + "\n" + `${cssupdate}`;
      var link = document.createElement("link");
      link.rel = "stylesheet";
      link.type = "text/css";
      link.href = "data:text/css," + encodeURIComponent(css); 
      document.querySelector("head").appendChild(link);
    });
  </script>
</head>

plnkr http://plnkr.co/edit/Gh0qR4CcQPROXCldX9OC?p=preview

Answer 3

您可以只在css文件中编写一个css类，然后通过javascript在运行时应用css类，如下所示：

html file:
<div id="test"></div>

css file:
.context-menu-icon-case1: {
  color: xxx,
  width: xxx
}

javascript file:
var ele = document.getElementById("test");
ele.className += "context-menu-icon-case1";

如何通过JavaScript在自定义CSS文件中创建类？

问题描述

3 个解决方案

解决方案1
2

解决方案2
2 已采纳 2016-08-07 05:52:35

解决方案3
-1 2016-08-07 06:49:25

如何通过JavaScript在自定义CSS文件中创建类？

问题描述

3 个解决方案

解决方案1 2

解决方案2 2 已采纳 2016-08-07 05:52:35

解决方案3 -1 2016-08-07 06:49:25

解决方案1
2

解决方案2
2 已采纳 2016-08-07 05:52:35

解决方案3
-1 2016-08-07 06:49:25