How to create class in a custom CSS file by JavaScript?

Question

I want to create a CSS class at runtime using JavaScript and write in a custom CSS file.

Now I wrote the code (see below) and created my class but I don't know how to create it in my CSS file.

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

It creates the CSS class in my current page but I want to create it in a custom css file.

I'm not sure exactly what you're saying. Do you mean you want to write it out to a CSS file on the server? — Jonathan Lam
– Jonathan Lam, Commented Aug 7, 2016 at 5:07
@guest271314 no my css file befor created I wnat only append some class to it as runtime by java script — Motion
– Motion, Commented Aug 7, 2016 at 5:43
First you say that you want to create it in a custom CSS file (sounds like write-to-file which cannot be done), than you say you want to append on runtime some class to an element... which is not true since you actually want to assign a style (to some :before element). Please try to be more precise when asking questions! — Roko C. Buljan
– Roko C. Buljan, Commented Aug 7, 2016 at 7:07

guest271314 · Accepted Answer · 2016-08-07 06:40:52Z

You can request the existing .css file using XMLHttpRequest() or fetch() instead of loading the file at html, append the new style rule to the .css file at XMLHttpRequest.responseText or response.text(), or using FileReader.

Create a Blob or File object, or encoded text representation of new css text appended to existing file, create a <link> element with rel attribute set to stylesheet, href attribute to an objectURL, data URI or encoded text of the created file, append the link element to 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

user5116395 · Accepted Answer · 2016-08-07 05:09:35Z

2

You can't. I am sorry. Good news is you don't need to. Inserting CSS through Javascript is the same as reading from a css file.

answered Aug 7, 2016 at 5:09

user5116395

Comments

Veetase · Accepted Answer · 2016-08-07 06:49:25Z

-1

You can just write a css class in css file, and then apply the css class on runtime by javascript, like this:

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";

answered Aug 7, 2016 at 6:49

Veetase

1541 silver badge7 bronze badges

1 Comment

Roko C. Buljan Over a year ago

: { and comma-separated properties in CSS? Also using className += you should provide firstly a space character, or simply use classList.add

Collectives™ on Stack Overflow

How to create class in a custom CSS file by JavaScript?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related