Is there a way to update CSS variables specifically scoped under a certain CSS class (or even other complex CSS selectors) that are predefined in a stylesheet? This question extends beyond just CSS variables and includes other CSS properties as well, questioning whether class-specific CSS properties can be updated without directly targeting a specific HTML element, but rather by targeting the class definition itself.
Below are code snippets illustrating an example scenario. Comments within the code provide insight into what is happening on specific lines.
var toggle = true;
function changeColor() {
document.documentElement.style.setProperty('--bg-color', toggle ? 'green' : 'red');
// This works for the "outer" div since we are receiving the global value (defined in :root) of --bg-color
toggle = !toggle;
// Here I also want to change the scoped value of --bg-color for "inner-primary" and "inner-secondary"
// Currently, I am doing this by:
document.querySelectorAll('.inner-primary').forEach(ele => ele.style.setProperty('--bg-color', toggle ? 'blue' : 'yellow'))
document.querySelectorAll('.inner-secondary').forEach(ele => ele.style.setProperty('--bg-color', toggle ? 'yellow' : 'blue' ))
// Another approach could involve dynamically inserting a style tag, however, this can become messy with multiple iterations
}:root {
--bg-color: red;
}
body {
margin: 0;
}
.outer {
width: 100vw;
height: auto;
min-height: 100vh;
text-align: center;
background-color: var(--bg-color); /* receives value from :root */
}
.inner-primary,
.inner-secondary {
width: 100px;
height: 100px;
/* Receives scoped value from .inner-primary or .inner-secondary defined below*/
background-color: var(--bg-color);
border: 1px solid black;
margin: auto;
margin-bottom: 10px;
}
.inner-secondary {
--bg-color: yellow;
}
.inner-primary {
--bg-color: blue;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
</head>
<body>
<div class="outer">
<div class="inner-primary"></div>
<div class="inner-secondary"></div>
<div class="inner-primary"></div>
<div class="inner-secondary"></div>
<button onclick="changeColor()">Change Color</button>
</body>
</html>Running this code will demonstrate the intended effect. Clicking the "Change Color" button at the bottom will showcase the effects in action.
To override the CSS variable --bg-color for classes inner-primary and inner-secondary, I had to use querySelectorAll with the necessary CSS selector (in this case, just a class name) and iteratively set the CSS variable for each individual element found.
Considering how CSS is interpreted by the browser, it seems like an alternative solution would be to dynamically insert a style element tag into the DOM with the required CSS variable updates scoped under the necessary class name (or any other required selector). However, this method can get messy if not managed properly to avoid multiple unnecessary inserts.
Are there any other methods to achieve this task? Is there a native API that can handle this without needing to access individual elements or inserting style tags dynamically?