Modify CSS Variables/Custom Properties in Jquery

Modify CSS variables / custom properties in jQuery

jQuery only supports CSS custom properties in version 3.2.0 and later. There is no support for them in 2.x or earlier, so accessing them with .css() will not work in those versions. If upgrading jQuery is not an option, you will need to use the built-in style object to access them.

$(":root").css("--color1", "red");console.log(".css method on “:root”      :", $(":root").css("--color1"));
$(":root")[0].style.setProperty("--color2", "lime");console.log("[0].style method on “:root” :", $(":root")[0].style.getPropertyValue('--color2'));

#p1 {  background-color: var(--color1);}
#p2 {  background-color: var(--color2);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script><p id="p1">p with background --color1</p><p id="p2">p with background --color2</p>

Change CSS variable using jQuery

You may change the css variable using plain JavaScript elem.style.setProperty("variableName", "variableProp");

$("html").on('click', function() {    $("body").get(0).style.setProperty("--color", "hotpink");  });

body {  --color: blue;  background-color: var(--color);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
click me!

Is it possible to change CSS Variables globally via jQuery?

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

Accessing a CSS custom property (aka CSS variable) through JavaScript

You can use document.body.style.setProperty('--name', value);:

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get

document.body.style.setProperty('--foo-bar', newValue);//set

Change CSS root variable with jquery or javascript

You can do this pretty easy with something like:

document.documentElement.style.setProperty('--themeColor', 'red');

Update:
Not sure if the question was just about changing the color as I thought. Now I've also added a getRandomColor() example. Just to get random stuff can be a big load of work depending if you want to save the last used color by the user or so ...

// array with colorsvar colors = [  "red",  "green",  "lime",  "purple",  "blue"];
// get random color from arrayfunction getColor() {   return colors[     Math.floor(Math.random() * colors.length)   ];}
// Set the color from arraydocument.documentElement.style.setProperty('--themeColor', getColor());

:root {    --themeColor: orange;}
a {  color: var(--themeColor)}      div {  width: 100px;  height: 100px;  background-color: var(--themeColor);}

<a href="#">Hello world</a><div>Test</div>

What is the simplest way to edit CSS variables with jQuery?

As of March 16, 2017, support for custom properties has been shipped in jQuery 3.2.0 and later. There are no plans to backport this functionality to 2.x or earlier, so if you need to use an older version of jQuery for maintenance reasons, you'll need to continue using the built-in style object to access your custom properties.

---

jQuery does not support custom properties yet. There's a pull request that has yet to be reviewed (but based on recent comments appears to be slated for a near upcoming version). Priority is not that high though, as custom properties are still a fairly new feature and their nature makes both developing a wrapper for browsers that support them natively, re-implementing them in JavaScript for browsers that don't, and testing the feature to make sure everything works without breaking other jQuery features as well as existing sites, quite a task.

How can I change the value of CSS custom property by 1 on button click using jQuery?

You have two problems:

• Everytime click Next button, your x variable is re-declared as 0. You should define it outside the callback function.
• $(":root")[0].style.setProperty("--slider-index", x++); will set --slider-index property by 0 and then increase x value by 1. You should use ++x to increase x value by 1 before assigning to --slider-index property.

---

Related Topics