Question

我有一堆SVG元素的应用程序。当我将鼠标悬停在SVG元素上时，它们会暂时改变颜色，如果我单击一个，它会永久地改变颜色（或直到再次单击它）。单击SVG元素时，将调用此代码：

styles = styles + " selected";
$(this).attr("class", styles);

CSS规则用颜色填充SVG元素。这在所有浏览器中都有效，但已停止在Chrome 35中运行，问题仍然存在于36 beta版中。它似乎在37中修复。在Chrome中，GUI似乎卡住了 - 悬停和点击操作有效，但颜色变化不可见 - 代码执行正确，但似乎无法正确呈现。

我有几个见解：

这是我第一次这样做 - 当我在应用程序中的其他位置导航并返回时（它再次显示SVG），它开始工作。
当我检查Dev工具中的代码时，我看到该元素已经选择了＆＃34;＆＃34; class，而且，元素具有彩色填充（在CSS检查器中） - 但它对用户不可见。当我在CSS检查器中禁用并启用任何CSS规则时，它开始工作。我研究了Chrome的更改日志，但无法找到相关内容。它适用于所有其他主流浏览器。

编辑：无论我将规则添加到元素的方式，它都不会渲染它，直到我重新加载整个父元素，这是我不能做的。代码似乎完全符合我的要求（内部），但Chrome只是没有显示更改。有没有办法模拟与Google开发工具css规则更改相同的操作？（总是为我修好）？

亲切的问候，卢卡斯

Answer 1

如果您想更新网页的CSS规则，可以通过

与他们联系

document.styleSheets

所以第一个样式表将是

document.styleSheets[0]

所以，如果你有

p {
    color: blue;
}

在该页面的唯一样式表中

var rule = document.styleSheets[0].cssRules[0]

和

document.styleSheets[0].cssRules[0].style.setProperty('color','#00cc00',null);

将更新规则中的颜色属性。有更多信息here。