大量主题的可维护CSS
我必须实现一个网页应用的主题，用户将能够切换之间的动态。设计人员需要大约20种不同的字体颜色和背景色。有没有办法做到这一点而不创建20个不同的.css文件？这将是一个可维护性的噩梦。
我认为JavaScript可能会被使用。我目前正计划将.css文件作为标记附加到DOM中，然后在用户更改主题时对颜色代码进行字符串替换。我希望找到一个更好的解决方案，因为这似乎是一次相当糟糕的黑客攻击。
回答 3
Stack Overflow用户
发布于 2015-06-10 03:28:51
广义地说，我知道在使用一个css源(可能需要或不需要多个文件)的同时改变站点样式的两种方法。
- 定义大量类
.blueBorder、.redBorder等，并根据需要使用JavaScript添加和删除元素上的类。 - 或者定义类并再次使用JavaScript，则更改这些类的定义。
这两种方法混合使用是可能的，尽管我不知道为什么要这样做。
下面是使用第二种方法的JSFIDDLE。
我决定使用纯jQuery解决方案，而不是使用jQuery，这会使编码更简单(我猜)，因为它的选择器很强大。其中的肉，然而，我并没有写。Patrick的函数getCSSRule可以找到这里。对函数的每一行进行注释。但是，我删除了Fiddle中的评论，只是因为包装问题。
函数返回一个指向CSS规则的指针，该指针可以很容易地操作。例如：
// get a class rule (in production code check return value for valid result)
var r = getCSSRule('.primaryColor');
// change its definition
r.style.backgroundColor = "#f00";所有将类primaryColor分配给它们的元素，在上面的2行执行时，它们的背景色将更改为红色(#f00)。没有别的要求了。
注意样式表中节点的名称与CSS规则不完全相同(backgroundColor和background-color)。我知道这里有很多人不喜欢w3Schools.com站点，但是在寻找样式对象引用时，我就在那里找到了一个。你可以找到它，这里
这是密码：
启动CSS样式：
<style type="text/css">
#box1 {width: 50%; height: 200px; margin: 40px auto; padding-top: 20px;}
#box2 {width: 50%; height: 120px; margin: 20px auto 20px; padding: 10px;}
.primaryColor {background-color: #f00;}
.primaryBorder {border: 10px solid #000;}
.secondaryColor {background-color: #ff0;}
.secondaryBorder {border: 5px solid #fff;}
.t {color: #f00;}
</style>HTML:
<div id="box1" class="primaryColor primaryBorder">
<div id="box2" class="secondaryColor secondaryBorder"><p class="t">Theme Demonstration</p>
</div>
</div>
<form style="margin: 40px auto; width:50%">
<div role="radio" style="text-align:center" aria-checked="false">
<input type="radio" name="theme" CHECKED value="theme1" onClick="setThemeOne()" >Theme 1
<input type="radio" name="theme" value="theme2" onClick="setThemeTwo()" >Theme 2
<input type="radio" name="theme" value="theme3" onClick="setThemeThree()">Theme 3
</div>
</form>和好东西，JavaScript:
function getCSSRule(ruleName, deleteFlag) {
ruleName=ruleName.toLowerCase();
if (document.styleSheets) {
for (var i=0; i<document.styleSheets.length; i++) {
var styleSheet=document.styleSheets[i];
var ii=0;
var cssRule=false;
do {
if (styleSheet.cssRules) {
cssRule = styleSheet.cssRules[ii];
} else {
cssRule = styleSheet.rules[ii];
}
if (cssRule) {
if (cssRule.selectorText.toLowerCase()==ruleName) {
if (deleteFlag=='delete') {
if (styleSheet.cssRules) {
styleSheet.deleteRule(ii);
} else {
styleSheet.removeRule(ii);
}
return true;
} else {
return cssRule;
}
}
}
ii++;
} while (cssRule)
}
}
return false;
}
function setThemeOne() {
var r = getCSSRule('.primaryColor');
r.style.backgroundColor = "#f00";
r = getCSSRule('.primaryBorder');
r.style.border = "10px solid #000;";
r = getCSSRule('.secondaryColor');
r.style.backgroundColor = "#ff0";
r = getCSSRule('.secondaryBorder');
r.style.border = "5px solid #fff";
r = getCSSRule('.t');
r.style.color = "#000";
};
function setThemeTwo() {
var r = getCSSRule('.primaryColor');
r.style.backgroundColor = "#ff0";
r = getCSSRule('.primaryBorder');
r.style.border = "10px solid #ccc;";
r = getCSSRule('.secondaryColor');
r.style.backgroundColor = "#f00";
r = getCSSRule('.secondaryBorder');
r.style.border = "5px solid #000";
r = getCSSRule('.t');
r.style.color = "#ccc";
};
function setThemeThree() {
var r = getCSSRule('.primaryColor');
r.style.backgroundColor = "#ccc";
r = getCSSRule('.primaryBorder');
r.style.border = "10px solid #000;";
r = getCSSRule('.secondaryColor');
r.style.backgroundColor = "#000";
r = getCSSRule('.secondaryBorder');
r.style.border = "5px solid #fff";
r = getCSSRule('.t');
r.style.color = "#fff";
};关于兼容性的注记
我在IE11和当前版本的Chrome中测试了这个具体的例子。不过，从2011年起，我就在一个站点上部署了类似的代码，当时该站点支持浏览器返回到IE7或IE8 (请记住)，而且没有人报告过问题。但我现在看到了，我确实修补了Chrome的getCSSRule功能。(对于目前的版本，我不必这么做。)下面是补丁：
if (cssRule){ //If we found a rule...
// [KT] 04/24/2012 - added condition to check for undefined selector for Chrome
if ((cssRule.selectorText != undefined) && cssRule.selectorText.toLowerCase()==ruleName)){//match rule Name?Stack Overflow用户
发布于 2015-06-05 18:51:08
使用沙斯，您可以在CSS中使用变量，您只需在一个文件中修改它，并且它使用更新的变量进行编译，您可能应该尝试这样做。
干杯
Stack Overflow用户
发布于 2015-06-06 10:27:32
CSS预处理程序总是在这里获胜。
我会避免一个单独的样式表与css，只需定义所有的颜色在一个地方与良好的评论。它将变得混乱的css和大量的色彩方案。即
/***
RED THEME
***/
.red-theme .button {}
.red-theme a {}
.red-theme #footer {}
/***
END RED THEME
***/https://stackoverflow.com/questions/30673693
复制相似问题
腾讯云开发者
