Question

假设我有这门课程：

.MyClass{background:red;}

这个类适用于几个div。我想通过更改MyClass中定义的颜色将背景颜色更改为橙色。

现在，我知道我可以做$('.MyDiv').css('background', 'orange');

但我的问题是：我如何更改CSS类定义，以便MyClass元素现在具有background:orange;？我希望能够将多种CSS颜色属性从一种颜色更改为另一种颜色。

感谢。

Answer 1

实际上改变样式表非常具有挑战性。但是，更容易的是，你可以将样式表转换为另一个样式表，这可能足以满足您的需要。请参阅How do I switch my CSS stylesheet using jQuery?。

为了实际更改样式表内容，How to change/remove CSS classes definitions at runtime?将帮助您入门。

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 = '<style>.company-background {background-color: ' + companyColor + '; color: white;}</style>';
$('html > head').append($(style));

//give any element that needs this background color the class "company-background"

Answer 4

您有2个选项

添加一个覆盖此.MyClass
有一个具有不同属性的第二个类，并更改这些元素上的类名称

Answer 5

看看你的问题，我认为更好的方法是使用JavaScript将 MyClass 与其他内容切换，而不是动态更改类的属性。

但如果您仍然热衷于使用jQuery http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

切换CSS样式表

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');
});

改变CSS类定义

7 个答案: