Tengo una etiqueta de estilo con
.first { color: red } .other { color: blue }Entonces estoy cambiando el primer selector allí
style.sheet.cssRules[0].selectorText = '.second'Ahora quiero obtener el estilo css completamente actualizado.
.second { color: red } .other { color: blue }Pero en lugar de eso, obtengo el contenido original de la etiqueta.
¿Cómo debo corregir el código para obtener nuevos estilos?
var style = document.getElementById('style') style.sheet.cssRules[0].selectorText = '.second' console.log(style.textContent) <style id="style">.first { color: red } .other { color: blue }</style> <p class="first">First</p> <p class="second">Second</p> <p class="other">Other</p>Puede concatenar el cssText de cada regla.
var style = document.getElementById('style') style.sheet.cssRules[0].selectorText = '.second' let newStyle = [...style.sheet.cssRules].reduce((acc, curr)=>acc + curr.cssText, ""); console.log(newStyle); <style id="style">.first { color: red } .other { color: blue }</style> <p class="first">First</p> <p class="second">Second</p> <p class="other">Other</p>