是否可以动态更改 CSS 规则集（即某些 JS 会在用户单击小部件时更改 CSS 规则集）
这个特殊的 CSS 规则集应用于页面上的许多元素（通过类选择器），我想在用户单击小部件时修改它，以便所有具有类的元素都发生变化。
从 Javascript 更改 CSS 规则集
IT技术
javascript
css
2021-01-10 19:51:38
6个回答
可以，但是比较麻烦。关于如何做到这一点的最佳参考是以下文章：Totally Pwn CSS with Javascript（网络存档链接）。
我设法让它与 Firefox 和 IE 一起使用 - 我不能在 Chrome 中，虽然它似乎支持 DOM 方法。ricosrealm报告说它也适用于 Chrome。
这是一个基于 Totally Pwn CSS 和 Javascript 的现代版本。这是 ES6 我希望不要介意。
function getCSSRule(ruleName) {
ruleName = ruleName.toLowerCase();
var result = null;
var find = Array.prototype.find;
find.call(document.styleSheets, styleSheet => {
result = find.call(styleSheet.cssRules, cssRule => {
return cssRule instanceof CSSStyleRule
&& cssRule.selectorText.toLowerCase() == ruleName;
});
return result != null;
});
return result;
}
此函数返回一个 CSSStyleRule，您可以像这样使用它：
var header = getCSSRule('#header');
header.style.backgroundColor = 'red';
还有document.styleSheets列出 CSSStylesSheets 对象的引用。访问页面中特定 sytleSheet 的其他方法是为 html 代码中的样式或链接元素分配一个id，并使用document.getElementById('my-style').sheet在 javascript 中获取它。这是一些有用的方法：
主要浏览器和 IE9+： insertRule()、deleteRule()、removeProperty()。
主要浏览器，Firefox？和 IE9+： setProperty()。
<stye id="my-style" ...
....
var myStyle = document.getElementById('my-style').sheet
myStyle.insertRule('#header { background: red; }', 0);
也可以动态创建一个新的样式元素来存储动态创建的样式，我认为应该是避免冲突的方法。
您可以按如下方式在文档样式表中编辑 CLASS
[...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.box')
.style.background= 'red';
我通过@alex-gyoshev 评论中的链接尝试了代码，但它不起作用
- 它在 Chrome 中使用 Google 字体的 CSS 规则失败
- 它在 FireFox 安全检查中失败
所以我稍微改变了它，但删除了delete功能，因为我不需要它。在 IE 11、FireFox 32、Chrome 37 和 Opera 26 中检查。
function getCSSRule(ruleName) { // Return requested style object
ruleName = ruleName.toLowerCase(); // Convert test string to lower case.
var styleSheet;
var i, ii;
var cssRule = false; // Initialize cssRule.
var cssRules;
if (document.styleSheets) { // If browser can play with stylesheets
for (i = 0; i < document.styleSheets.length; i++) { // For each stylesheet
styleSheet = document.styleSheets[i];
if (!styleSheet.href) {
if (styleSheet.cssRules) { // Browser uses cssRules?
cssRules = styleSheet.cssRules; // Yes --Mozilla Style
} else { // Browser usses rules?
cssRules = styleSheet.rules; // Yes IE style.
} // End IE check.
if (cssRules) {
for (ii = 0; ii < cssRules.length; ii++) {
cssRule = cssRules[ii];
if (cssRule) { // If we found a rule...
// console.log(cssRule);
if (cssRule.selectorText) {
console.log(cssRule.selectorText);
if (cssRule.selectorText.toLowerCase() == ruleName) { // match ruleName?
return cssRule; // return the style object.
}
}
}
}
}
}
}
}
return false; // we found NOTHING!
}