可以使用JavaScript修改CSS样式表吗?
I‘m NOT指的是:
document.getElementById('id').style._____='.....';
I AM谈论改变:
#id {
param: value;
}
除了做一些不好的事情(顺便说一句,我们还没有尝试过),比如在头部创建一个新的对象,在其中创建一个样式标签,等等。尽管这样做确实有效,但也会带来一些问题,因为样式块已经在其他地方定义了,而且我不确定浏览器何时/是否会解析动态创建的样式块?
发布于 2011-07-08 13:48:08
截至2011年
是的,你可以,但你将面临跨浏览器的兼容性问题:
http://www.quirksmode.org/dom/changess.html
截至2016年
对浏览器的支持有了很大改进(支持所有浏览器,包括IE9+)。
insertRule()
方法允许向样式表动态添加规则,您可以从样式表中的deleteRule()
中删除现有规则。可以通过样式表的cssRules
属性访问样式表。发布于 2016-07-01 04:58:22
我们可以使用.insertRule
和.cssRules
的组合来完全返回到IE9:
function changeStylesheetRule(stylesheet, selector, property, value) {
// Make the strings lowercase
selector = selector.toLowerCase();
property = property.toLowerCase();
value = value.toLowerCase();
// Change it if it exists
for(var i = 0; i < stylesheet.cssRules.length; i++) {
var rule = stylesheet.cssRules[i];
if(rule.selectorText === selector) {
rule.style[property] = value;
return;
}
}
// Add it if it does not
stylesheet.insertRule(selector + " { " + property + ": " + value + "; }", 0);
}
// Used like so:
changeStylesheetRule(s, "body", "color", "rebeccapurple");
发布于 2011-07-08 17:18:35
当我想以编程方式向对象添加一组样式时,我发现以编程方式向对象添加一个类更容易(这样的类在您的CSS中具有与其相关联的样式)。您可以控制CSS中的优先顺序,以便来自新类的新样式可以覆盖以前拥有的样式。这通常比直接修改样式表容易得多,并且可以跨浏览器完美地工作。
https://stackoverflow.com/questions/6620393
复制相似问题