javascript - 从脚本更新选择器后获取样式文本

Question

我有一个样式标签

.first { color: red } .other { color: blue }

然后我在那里更改第一个选择器

style.sheet.cssRules[0].selectorText = '.second'

现在我想获得完整更新的CSS样式

.second { color: red } .other { color: blue }

但我得到的不是标签的原始内容。

我应该如何修复代码以获得新样式？

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>

Answer 1

您可以连接每个规则的 cssText。

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>