Edit .css using javascript (with brackets)

Question

I saw some threads talking about this, but I don't see anyone how to change .css when you have brackets in your .css

I have a .css in my header, and I want to give my users the ability to change the background color and the text color.

Using inspector in my website I detected which pieces of CSS do that.

Color text is inside this .filepond--file:

.filepond--file {
  position: static;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 0.5625em 0.5625em;
  color: #fff;
  border-radius: 0.5em;
}

And the background is here:

[data-filepond-item-state='processing-complete'] .filepond--item-panel {
  background-color: #369763;
}

How should I change the color of both things using javascript? Thanks!

How a look at this function: https://stackoverflow.com/a/8630641/443523 — Mark Baijens, Aug 17 '18 at 12:12
Possible duplicate of [How to dynamically create CSS class in JavaScript and apply?](https://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply) — Mark Baijens, Aug 17 '18 at 12:13
Hello and this can make work even if has brackets in the style? — K3ny1, Aug 17 '18 at 12:15
The first (accepted) answer most likely does. The second answer with the function just attaches styles to a selector. — Mark Baijens, Aug 17 '18 at 12:17
Could you bring me an example? I've checked that thread but I feel that's not what I'm looking for. Thank you for your time! — K3ny1, Aug 17 '18 at 12:20
I'd say the function is ideal for your use case. Specify the selector, specify the background color, win! — Mark Baijens, Aug 17 '18 at 12:26
Thank you for your "help". You send me links. I told you, can you bring me an example because I don't feel that's my use case. You tell me again to go to the link. Okay. Thank you so much for your help. I will wait for another reply may that can help me to understand how to do, not copy a 100 lines function that I don't know what it does. — K3ny1, Aug 17 '18 at 12:29
@K3ny1 I'm curious why you think the brackets in the CSS are a problem. Why would brackets, specifically, make things harder? — Mr Lister, Aug 17 '18 at 12:30
@MrLister Because all the cases here and questions on the internet websites come without the brackets. — K3ny1, Aug 17 '18 at 12:34
But can't you at least try? Testing it isn't that hard. Like Mark says, specify the selector, specify the background color. That's all there is to it. And in your question, you never say that you won't accept solutions of which you don't understand how they work. — Mr Lister, Aug 17 '18 at 12:46
@K3ny1 The links provide you plenty of examples. That's why I marked this question as duplicate. You don't need to be rocket scientist to understand that you can use your brackets within the style element. There are even brackets in their example. Don't be lazy and do some research before asking a question. We are not a code supplying factory. If you run into problems with that code you can post and we love to help you out with that. But at least try it yourself first. — Mark Baijens, Aug 17 '18 at 14:26
Also the function of 100 lines is pretty well written and pretty easy to read. If you don't understand something about it you can always ask, but i don't see the need to explain every line of code for you since most is pretty basic. — Mark Baijens, Aug 17 '18 at 14:30

Rainer Plumer · Accepted Answer · 2018-08-17T15:35:20.807

You dont need to edit css stylesheets. You can add your own style element to the page, which can overwrite the previous styles.

e.g

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.filepond--file { color: #F00 !important; }';
style.innerHTML = '[data-filepond-item-state='processing-complete'] .filepond--item-panel { background: green !important; }';
document.getElementsByTagName('head')[0].appendChild(style);

for example, if you copy paste the below code into StackOverflow developer console, it will make the post code black/white.

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.prettyprint { color: white; background: black }';
document.getElementsByTagName('head')[0].appendChild(style);

You should have tested this before posting. Also, `document.head`. — Mr Lister, Aug 17 '18 at 14:35

Edit .css using javascript (with brackets)

1 Answers1