How do I edit a CSS variable using JS?

by

Turns out changing CSS variables is possible using the el.style.cssText property, or el.style.setProperty or el.setAttribute methods. In your code snippets el.setAttribute is incorrectly used, which is causing the error you encountered. Here’s the correct way:

document.documentElement.style.cssText = "--main-background-color: red";

or

document.documentElement.style.setProperty("--main-background-color", "green");

or

document.documentElement.setAttribute("style", "--main-background-color: green");

Demo

The following demo defines a background color using a CSS variable, then changes it using the JS snippet 2 seconds after loading.

window.onload = function() {
  setTimeout(function() {
    document.documentElement.style.cssText = "--main-background-color: red";
  }, 2000);
};
html {
    --main-background-image: url(../images/starsBackground.jpg);
    --main-text-color: #4CAF50;
    --main-background-color: rgba(0,0,0,.25);
    --beta-background-color: rgba(0,0,0,.85);
}

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

This will only work in browsers supporting CSS variables obviously.

More Related Contents:

  1. When we using alert vs popup div tag? [closed]
  2. How to hide css and js version details from weppalyzer in PHP
  3. How to do this mouse over effect in jquery?
  4. How to make page loaders/animations/transitions
  5. toggle show/hide div with button?
  6. Replacing css file on the fly (and apply the new style to the page)
  7. What is the cleanest way to disable CSS transition effects temporarily?
  8. Parsing CSS in JavaScript / jQuery
  9. Determine if an element has a CSS class with jQuery
  10. Show loading image while $.ajax is performed
  11. How to show popup message like in Stack Overflow
  12. Using jQuery how to get click coordinates on the target element
  13. How do I achieve equal height divs (positioned side by side) with HTML / CSS ?
  14. How to select all checkboxes with jQuery?
  15. Dropdown select with images
  16. css transition doesn’t work if element start hidden
  17. jquery – How to determine if a div changes its height or any css attribute?
  18. How to convert unordered list into nicely styled dropdown using jquery?
  19. Responsive horizontal page sliding
  20. How to build simple tabs with jQuery?
  21. Bootstrap Dropdown with Hover
  22. How to get border width in jQuery/javascript
  23. How to show hidden divs on mouseover?
  24. jQuery Popup Bubble/Tooltip [closed]
  25. How do I make a div full screen?
  26. Find the “potential” width of a hidden element
  27. Convert css width string to regular number
  28. jQuery add class based on page URL
  29. Difference between jQuery’s .hide() and setting CSS to display: none
  30. jQuery – How to get all styles/css (defined within internal/external document) with HTML of an element

Leave a Comment