我想使用 JavaScript 来操作我的 CSS。首先,它只是被认为是一个不错的小脚本,可以为我的 Accordion 菜单尝试不同的颜色以及来自输入字段的不同背景/标题-/内容-/...背景颜色。
我明白了我是如何用js获取输入值的。
我了解如何使用 getElementById()
、getElementsByClassName()
、getElementsByTag()
和 getElementsByName( )
。
现在,问题是我的 CSS 看起来像这样:
.accordion li > a {
/* some css here */
}
.sub-menu li a {
/* some css here */
}
.some-class hover:a {
/* css */
}
.some-other-class > li > a.active {
/* css */
}
如何使用 JavaScript 更改此类样式的属性?
最佳答案
无法直接使用 JavaScript 操作某些 CSS 样式。相反,您可以更改 stylesheet 中的规则本身,像这样:
var changeRule = function(selector, property, value) {
var styles = document.styleSheets,
n, sheet, rules, m, done = false;
selector = selector.toLowerCase();
for(n = 0; n < styles.length; n++) {
sheet = styles[n];
rules = sheet.cssRules || sheet.rules;
for(m = 0; m < rules.length; m++) {
if (rules[m].selectorText.toLowerCase() === selector) {
done = true;
rules[m].style[property] = value;
break;
}
}
if (done) {
break;
}
}
};
changeRule('div:hover', 'background', '#0f0');
selector
必须与现有的选择器完全匹配,只有选择器文本和 {
之间的空格会被忽略。
您可以开发代码来查找和更改选择器名称的部分命中,或者只检查特定样式表而不是所有样式表。事实上,当拥有数十个样式表和数千条规则时,它的成本也相当高。
不幸的是,伪元素无法使用此代码段进行操作。
现场演示 jsFiddle .
关于javascript - 使用 JavaScript 操作 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17452726/