CSS global variable change with js

Question

@Color1 = #fff;
@Color2 = #b00;

h1 {
  color:@Color1;
  background:@Color2;
}

How can i change @Color1 and @Color2 with JS? This is my example code.

or

.chat-wrapper .chat-message.chat-message-sender .chat-message-wrapper:before {
    right: -20px;
    border-left-color: #8AC0D9;
}

How can I reach the border-left-color JavaScript code? I have a dynamically changing color value. I have to apply this. How can I do it ?

EDIT

main.css // this my css file @Álvaro-gonzález

.chat-wrapper .chat-message.chat-message-sender .chat-message-wrapper,
.chat-wrapper .chat-message.chat-message-sender .chat-message-content {
    float: right;
}
.chat-wrapper .chat-message.chat-message-sender .chat-message-wrapper:before {
    right: -20px;
    border-left-color: #8AC0D9;
}

I don't think this is supported yet... You may use LESS for this. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Apr 21, 2017 at 8:55
I don't think this is pure CSS. You're probably using some CSS preprocessor. If that's the case, the browser does not even see the original code, just the generated CSS. Please update the question to reflect the missing information. — Álvaro González
– Álvaro González, Commented Apr 21, 2017 at 9:26
This is not how CSS works. You do not change property values in CSS rules. Instead, you add classes to elements so the right rule is selected. The only thing JS needs to do is add or remove the necessary classes. This is basic CSS. — user663031
– user663031, Commented Apr 21, 2017 at 12:20

Community · Accepted Answer · 2017-05-23 12:09:39Z

1

here is the answer to your question. So if you want to change value of any variable from linked question, you nee to do something like:

document.styleSheets[0].rules[0].style.setProperty("--red", "#FF0000");

Of course indexes of arrays must be double checked of iterated for finding corresponding selector

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Apr 21, 2017 at 9:21

Michael Stets

1081 silver badge8 bronze badges

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

3 Comments

Álvaro González Over a year ago

@forguta Did you just copy the pseudo-code from that other question and pretended that it's working CSS??

user663031 Over a year ago

it's hardly ever a good idea, and hardly ever necessary. to mutate the style sheet like this.

Michael Stets Over a year ago

I try not to discuss an entire idea. There is a question and here is an answer. It's pretty simple.

Collectives™ on Stack Overflow

CSS global variable change with js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related