I have a style tag with
.first { color: red } .other { color: blue }
Then I'm changing first selector there
style.sheet.cssRules[0].selectorText = '.second'
Now I want to get the full updated css style
.second { color: red } .other { color: blue }
But instead of it I'm getting tag's original content.
How should I fix the code to get new styles?
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>You can concatenate the cssText of each rule.
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>