1

I would like to use CSS Variables and change them globally via jQuery.

Here is some code:

$("div").click(function() {
  // Change globally "--text_color: rgb(0, 0, 255);" to for example "--text_color: rgb(0, 255, 255);"
});
:root {
  --text_color: rgb(0, 0, 255);
}

div {
  color: var(--text_color);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>Hello</div>

Is there a way to program this?

Would be very thankful for help!

Anna_B
  • 820
  • 1
  • 4
  • 23
  • 1
    Does this answer your question? [Change CSS root variable with jquery or javascript](https://stackoverflow.com/questions/40572157/change-css-root-variable-with-jquery-or-javascript) – bertdida Aug 18 '20 at 01:23
  • 1
    Hopefully, these 2 posts will be helpful to you. [https://stackoverflow.com/questions/36088655/accessing-a-css-custom-property-aka-css-variable-through-javascript](https://stackoverflow.com/questions/36088655/accessing-a-css-custom-property-aka-css-variable-through-javascript) [https://stackoverflow.com/questions/38002667/change-css-variable-using-jquery](https://stackoverflow.com/questions/38002667/change-css-variable-using-jquery) – Skyler Aug 18 '20 at 01:29
  • 3
    Does this answer your question? [Accessing a CSS custom property (aka CSS variable) through JavaScript](https://stackoverflow.com/questions/36088655/accessing-a-css-custom-property-aka-css-variable-through-javascript) – freedomn-m Aug 18 '20 at 01:31

4 Answers4

1

Since the variable is a global, you can set it anywhere in a style and the value will be updated.

$("div").click(function() {
    this.setAttribute("style", "--text_color: rgb(255, 255, 255);");
});

However, I would suggest you don't modify the global variable but to update a class name instead. Have a list off root variables and use different values in different classes:

:root {
    --text-color1: rgb(0, 0, 255);
    --text-color2: rgb(0, 255, 255);
}
.class1 {
    color: var(--text-color1);
}
.class2 {
    color: var(--text-color1);
}

Now you can change the class name on click:

$("div").click(function() {
   this.className = "class2";
});
Ibu
  • 42,752
  • 13
  • 76
  • 103
1

This has already been asked and answered.

Change CSS variable using jQuery

But to answer your question,

$(this).get(0).style.setProperty(variable, value);
yeho
  • 132
  • 2
  • 13
1

Append a <style> tag to the head. For further manipulation give it an id so you can easily remove or modify it

const rules = `:root {
  --text_color: rgb(0, 0, 255);}
div {
  color: var(--text_color);
}`


$("div").click(function() {
  $('<style>', {text: rules}).appendTo('head');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>Hello</div>
charlietfl
  • 170,828
  • 13
  • 121
  • 150
1

maybe try changing the class via addClass() link

and if you need to change it back you can use removeClass()link

called like this (more or less)

$(document).ready(function(){
  $("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");

with CSS like

.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}
Dharman
  • 30,962
  • 25
  • 85
  • 135
Gage
  • 26
  • 1