定义class css,改变CSS类定义(changing CSS class definition)

假设我有这个类：

.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