为什么使用 CSS insertRule 时 DOM 没有更新？

Question

我想向 DOM 添加 CSS 规则：

这是我的代码

function empty_rule(sheet, class_name) {
    const index = sheet.cssRules.length;
    sheet.insertRule(`.${class_name} { }`, index);
    return sheet.cssRules[index];
}

function make_style() {
  const $head = $('head');
  const $style = $('<style type="text/css"/>').appendTo($head);
  return $style.get(0).sheet;
}

function set_css(sheet, class_name, style) {
    const selector = `.${class_name}`;
    let rule = [...sheet.cssRules].find(rule => {
        return rule.selectorText === selector;
    });
    if (!rule) {
        rule = empty_rule(sheet, class_name);
    }
    Object.assign(rule.style, style);
}


const sheet = make_style();
const rule = empty_rule(sheet, 'cmd-terminal');

console.log(sheet);
console.log(rule);

/*
set_css(sheet, 'cmd-terminal', {
    color: 'red'
});
*/

在 CodePen 上我添加了这个 CSS 来查看 CSS：

style {
    display: block;
    white-space: pre;
    font-family: monospace;
}

但是我没有看到添加任何 CSS，我尝试在注释中添加给定的 CSS。但我什至没有看到空规则。我正在询问 chatGPT 但它对解决问题没有帮助。

这是 CodePen 链接

我使用 cash 库（轻量级 jQuery 替代品）。

我试图将

display: block;

添加到空规则中（这是一个 chatGPT 建议），但它没有解决问题。

我什至尝试了MDN中的内容：

$('body style').get(0).sheet.insertRule("#blanc { color: white }", 0);

但是风格没变。

编辑：我添加了：

此 HTML：

<p id="blanc">hello</p>

我在 Firefox、Google Chrome 和 Safari 中也有同样的行为。

当 JavaScript 运行时，标签就会消失。所以问题是为什么样式没有在 DOM（devTools）中更新以及为什么我添加的样式没有出现（添加时

display: block

）？

是否可以更新 DOM，以便更轻松地调试 CSS？

Answer 1

所以 cssRules 在 DOM 中似乎不可见。但是您可以创建调试代码来转储 CSS 并将其添加回 DOM：

function dump_css(sheet) {
    return [...sheet.cssRules].map(rule => rule.cssText).join('\n')
}

$('head style:last-child').text(dump_css(sheet));

这会将动态 CSS 渲染到 DOM 中。这段代码可以在调试时使用。

Answer 2

您似乎期望修改“虚拟”

sheet.CSSRules

将反映回HTMLStyleElement的“

innerHTML

”中。但显然，它不会：

<style
 id=s
 contenteditable
 style="
  display: block;
  white-space: pre;
  border: inset;
">body {
 background-color: darkslategray;
 color: tan;
}

[onclick]:empty::after { content: attr(onclick); }
</style>
i:
<input id=i value="body { color: red; }">
<button onclick="
s.sheet.insertRule(i.value, s.sheet.rules.length);
"></button>

这表明在附加到样式元素的工作表中添加新规则可以在不更改原始元素内容的情况下产生效果。