How to write CSS styles in a CSS files using JS?

Question

Suppose I have a CSS file custom_style.css and a HTML file custom_render.html.

custom_render.html contains some input field to take input from user and than generates CSS styles based on those input.

Now I want to store those generated CSS styles in a CSS file called custom_style.css [that is located in my projects root directory], so that I can show the users a preview/output of their selections.

After googling I got a way to store those generated CSS in the same file [custom_render.html] using JavaScript, but I want to store them in custom_style.css.

Can anyone tell me how can I write CSS Styles in CSS files using JavaScript or other JavaScript framework.
- Thanks

In web-based JS (i.e. not NodeJS), you can't directly write to files. That would be a huge security issue if browsers let webpages modify the filesystem. You could, however, prompt the user to download & save a custom-generated CSS file. — qxz
– qxz, Commented Feb 18, 2017 at 7:43
@siam PHP can't write to the user's files either, unless the OP is running a local PHP server. — qxz
– qxz, Commented Feb 18, 2017 at 7:49
@qxz I assumed OP tries to save the newly generated style in a css file that is located in OP's server. (as OP said that is located in my projects root directory) basically OP tries to override an existing css file (tho its a terrible idea) — m87
– m87, Commented Feb 18, 2017 at 7:55
@siam:: Currently I am not interested to do this task using PHP or something else. — Shimul
– Shimul, Commented Feb 18, 2017 at 8:07
@Shimul do you wanna save the styles for future reference or just to show the users their current changes? — m87
– m87, Commented Feb 18, 2017 at 8:13

RATKNUKKL · Accepted Answer · 2017-02-18 07:53:23Z

5

Well, you can modify the parameters of objects in your stylesheets. For example:

document.styleSheets[i].rules[j].style.marginTop = "100px";

i being the number corresponding to the sheet you want to edit

and

j being which element rule you want to change the parameter for.

In this case I used marginTop as a paramater and 100px as a value but it could be whatever valid CSS you would like.

answered Feb 18, 2017 at 7:53

RATKNUKKL

1265 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shimul Over a year ago

How can I add class? Because all styles are rendered as class based. i.e: .xyz { ..... ...... } .xyz + .abc { ...... ..... } and so on....

RATKNUKKL Over a year ago

There's probably a better way than this, but off the top of my head I'd create 'template' class as the first item of your css that just has some benign attribute like position: inherit (or something like that). Then you could do something like this:

var templateClass = document.styleSheets[0].rules[0];     var numberOfRules = document.styleSheets[0].rules.length;     document.styleSheets[0].rules[numberOfRules] = templateClass;     document.styleSheets[0].rules[numberOfRules].style.marginTop = "10px";

Sorry, I'm a stackOverflow n00b so don't know how to format this, haha.

RATKNUKKL Over a year ago

OOPS, and I forgot to add you'll probably have to set the new class name like this: document.styleSheets[0].rules[numberOfRules].selectorText = ".myNewClass"; Again, this is all just off the top of my head, but hopefully it gets you going in the right direction.

m87 · Accepted Answer · 2017-02-18 09:12:30Z

0

simple... (assuming this is what you trying to achieve)

var elem = document.getElementsByClassName('target_class');
// should use for loop to assign click event to each element containing this class
elem[0].onclick = function() {
  elem[0].style.background = 'green';
  elem[0].style.opacity = '0.2';
}

<div class="target_class" style="width: 200px; height: 200px; background: red"></div>

edited Feb 18, 2017 at 9:12

answered Feb 18, 2017 at 8:58

m87

4,5313 gold badges18 silver badges31 bronze badges

Comments

YOHANNES MOJO · Accepted Answer · 2022-11-11 15:21:21Z

0

insertRule(rule, index) This will inserts a new rule to the stylesheet, where the parameter "rule" is a string containing the entire rule to add (ie: #myid{color: red; border: 1px solid black}), and "index", an integer specifying the position within cssRules[] to insert the new rule.

document.styleSheets[0].insertRule("p{font-size: 20px;}", 0) //add new rule to start of stylesheet

edited Nov 11, 2022 at 15:21

answered Nov 11, 2022 at 15:16

YOHANNES MOJO

11 bronze badge

Collectives™ on Stack Overflow

How to write CSS styles in a CSS files using JS?

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related