假设我有这个类:
.MyClass{background:red;}
这个类适用于多个div的。 我想通过改变MyClass中定义的颜色改变背景橙色的颜色。
现在,我知道我可以做$('.MyDiv').css('background', 'orange');
但我的问题是真的这样的:我该如何更改CSS类定义,以便MyClass的元素现在有background:orange; ? 我希望能够从一个颜色改变几个CSS颜色属性到另一个。
谢谢。
Answer 1:
其实改变你的样式表是非常具有挑战性的。 要容易得多,不过,你可以切换出你的风格来一个不同的,这可能足以满足您的目的。 见我如何使用jQuery切换我的CSS样式表? 。
对于真正改变样式表的内容, 如何更改/在运行时删除CSS类的定义? 将让你开始。
Answer 2:
这是很难找到你想要的规则,因为你必须通过迭代document.styleSheets[i].cssRules阵列。 (并与比较你的类名selectorText属性)
所以,我解决这个问题是要增加一个新的CSS类,从HTML元素中删除旧的CSS类,并添加,而不是它这个类。
var length = getCssRuleLength(); var newClassName = "css-class-name" + length; //remove preview css class from html element. $("#your-html-element").removeClass("css-class-name"); $("#your-html-element").removeClass("css-class-name" + (length-1)); $("#your-html-element").addClass(newClassName); //insert a css class insertCssRule("." + newClassName + ' { max-width: 100px; }', length); function getCssRuleLength() { var length = 0; if (document.styleSheets[1].cssRules) { length = document.styleSheets[1].cssRules.length; } else if (document.styleSheets[1].rules) { //ie length = document.styleSheets[1].rules.length; } return length; } function insertCssRule(rule, index) { if (document.styleSheets[1].cssRules) { document.styleSheets[1].insertRule(rule, index); } else if (document.styleSheets[1].rules) { //ie document.styleSheets[1].addRule(rule, index); } }
Answer 3:
这里是我的答案,以防有人绊倒在此。 给你的元素不存在新的班级名称,然后动态地添加样式片段:
var companyColor = 'orange' //define/fetch the varying color here
var style = '';
$('html > head').append($(style));
//give any element that needs this background color the class "company-background"
Answer 4:
你有2个选择
添加一个新的样式表覆盖此.MyClass
具有不同特性的第二级,并改变对这些元素的类名称
Answer 5:
看着你的问题,我认为更好的办法是改用MyClass的别的东西使用JavaScript,而不是动态改变类的属性。
但是,如果你仍然热衷于此,你可以切换CSS样式表使用jQuery http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/
Answer 6:
var changeClassProperty = function(sheetName, className, propertyName, newValue, includeDescendents) {
var ending = '$';
setValue = '';
if (includeDescendents === true) {
ending = '';
}
if (typeof(newValue) != 'undefined') {
setValue = newValue;
}
var list = document.styleSheets;
for (var i = 0, len = list.length; i < len; i++) {
var element = list[i];
if (element['href'] && element['href'].match(new RegExp('jquery\.qtip'))) {
var cssRules = element.cssRules;
for (j = 0, len2 = cssRules.length; j < len2; j++) {
var rule = cssRules[j];
if (rule.selectorText.match(new RegExp(className + ending))) {
cssRules[j].style.backgroundColor = setValue;
console.log(cssRules[j].style.backgroundColor);
}
}
}
}
}
changeClassProperty('jquery.qtip', 'tipsy', 'backgroundColor', 'yellow');
Answer 7:
你会关闭添加和删除类,而不是试图改变他们好得多。
例如
.red {
background: red;
}
.orange {
background: orange;
}
$('#div').click(function(){
$(this).removeClass('red').addClass('orange');
});
文章来源: changing CSS class definition