Muchas respuestas sobre cómo obtener/establecer variables CSS "raíz", pero ninguna que haya encontrado sobre cómo obtener/establecer variables CSS NO raíz.
NOTA: Esta NO es la respuesta: https://stackoverflow.com/a/36088890/104380 Esa respuesta solo maneja variables raíz o variables en elementos, no en clases
Además: estas no son respuestas (de: https://www.google.com/search?q=get%2Fset+css+variables ). Revisé la primera página de enlaces. Todos ellos solo manejan variables raíz. Estoy tratando de lidiar con variables no raíz.
.foo { --fg-color: red; } .bar { --fg-color: blue; } div { color: var(--fg-color); } <div class="foo">foo</div> <div class="bar">foo</div> ¿Cómo se obtiene someFunctionToGetCSSVariable('.foo', '--fg-color') (sí, lo inventé). El punto es que quiero obtener/establecer la variable --fg-color en la regla .foo CSS. Cualquiera que sea la solución, obtener el valor que debería devolver 'rojo' o '#FF0000') y ¿cómo se configura en otra cosa?
Creo que lo que OP intenta hacer no es cambiar todos los elementos de esa clase determinada, sino cambiar la clase en sí, hay una diferencia. Lo que necesita (si lo entendí bien) es en realidad un cambio de cssRules en cierta clase. Creé un fragmento rápido (y sucio) de cómo buscar cssRules y cambiar las propiedades de CSS en él (incluida una personalizada):
<html> <head> <style> .foo { --fg-color: red; } </style> </head> <body> <div class="foo">lorem ipsum</div> <script> window.onload = function() { rules = document.styleSheets[0].cssRules for (var r in rules) { if (rules[r].selectorText == ".foo") { rules[r].style.setProperty('--fg-color', 'blue'); alert('hi'); break; } } }; </script> </body> </html>Podría aprovechar el hecho de que tenemos hojas de estilo en cascada.
Por supuesto, depende exactamente de cuál sea su estructura (por ejemplo, ¿hay elementos de estilo enterrados en el cuerpo?).
Para el caso simple, podría agregar otra hoja de estilo en la parte inferior del elemento principal.
<!doctype html> <html> <head> <style> .foo { --fg-color: red; } .bar { --fg-color: blue; } div { color: var(--fg-color); } </style> </head> <body> <div class="foo">foo</div> <div class="bar">foo</div> <button>Click me</button> <script> const button = document.querySelector('button'); button.addEventListener('click', function () { const head = document.querySelector('head'); const style = document.createElement('style'); style.innerHTML = '.foo { --fg-color: lime; }'; head.appendChild(style); button.style.display = 'none'; }); </script> </body> </html>Por supuesto, podría complicarse si esto sucede más de una vez. Querrás recordar que agregaste una hoja de estilo y deshacerte de ella antes de agregar otra, o modificarla in situ, dependiendo exactamente de cuál sea la situación. Y si hay un estilo disperso en el cuerpo, tendrá que agregar la hoja de estilo al final de eso.
Parece que tengo que recorrer todas las hojas de estilo y encontrar la regla. Aquí hay un intento.
function getCSSRuleBySelector(selector) { for (let s = 0; s < document.styleSheets.length; ++s) { const rules = document.styleSheets[s].cssRules; for (let i = 0; i < rules.length; ++i) { const r = rules[i]; if (r.selectorText === selector) { return r; } } } } function setCSSVariableBySelector(selector, varName, value) { const rule = getCSSRuleBySelector(selector); rule.style.setProperty(varName, value); } function getCSSVariableBySelector(selector, varName) { const rule = getCSSRuleBySelector(selector); return rule.style.getPropertyValue(varName); } console.log('was:', getCSSVariableBySelector('.foo', '--fg-color')); setCSSVariableBySelector('.foo', '--fg-color', 'green'); .foo { --fg-color: red; } .bar { --fg-color: blue; } div { color: var(--fg-color); } <div class="foo">foo</div> <div class="foo">foo</div> <div class="foo">foo</div> <div class="bar">bar</div> <div class="bar">bar</div>