在JavaScript或jQuery中动态更改CSS规则
在JavaScript或jQuery中动态更改CSS规则
提问于 2012-08-16 23:01:22
我正在寻找一种方法来更改导入到文档中的样式表的CSS规则。所以我有一个外部样式表和一些class和div属性。我想用JavaScript或jQuery更改其中一个规则。
下面是一个示例：
.red{
color:red;
}所以我们的想法是在JavaScript中做一些事情，并且HTML知道现在color是另一种颜色，就像这样：
.red{
color:purple;
}但是我希望将来通过append的方式添加的每个元素都有这个规则。因此，如果我添加一个带有CSS类.red的span，文本必须是紫色而不是红色。
我希望我说得很清楚了。
回答 2
Stack Overflow用户
发布于 2012-08-16 23:03:43
可以将样式声明注入到DOM中。
$("head").append('<style>.red { color: purple }</style>');Stack Overflow用户
发布于 2015-09-02 15:18:52
如果你想添加一个规则，而不是直接编辑每个元素的样式，你可以使用CSSStyleSheet.insertRule()。它有两个参数:字符串形式的规则和插入规则的位置。
以上链接中的示例：
// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);在本例中，myStyle是style元素的.sheet成员。
据我所知，必须先将style元素插入到文档中，然后才能抓取它的工作表，而且它不能是外部工作表。你也可以从document.styleSheets抓取一个工作表，例如
var myStyle = document.styleSheets[1]; // Must not be a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);注:该页建议通过更改元素的类来修改元素，而不是修改规则。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11990089
复制相关文章
相似问题
腾讯云开发者
