13

假设我有这个类：

.MyClass{background:red;}

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

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

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

谢谢。

4

7 回答 7

5

实际上改变你的样式表是相当具有挑战性的。不过，更容易的是，您可以将样式表换成不同的样式表，这可能足以满足您的目的。请参阅如何使用 jQuery 切换我的 CSS 样式表？.

对于实际更改样式表内容，如何在运行时更改/删除 CSS 类定义？会让你开始。

于 2012-05-17T21:06:58.600 回答
4

很难找到您想要的规则，因为您必须遍历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);
	}
}

于 2014-11-14T12:53:25.307 回答
2

这是我的答案，以防有人偶然发现。给你的元素一个不存在的新类名，然后动态添加一个样式段：

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"
于 2018-11-30T01:54:39.887 回答
0

你有2个选择

  1. 添加一个覆盖它的新样式表.MyClass
  2. 有第二个具有不同属性的类，并更改这些元素上的类名称
于 2012-05-17T21:09:13.910 回答
0

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

但如果你仍然热衷于你可以使用 jQuery http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/切换 CSS 样式表

于 2012-05-17T21:22:15.830 回答
0 
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');
于 2013-12-22T17:51:00.593 回答
-2

添加和删​​除类而不是尝试更改它们会更好。

例如

.red {
    background: red;
}

.orange {
    background: orange;
}

$('#div').click(function(){
    $(this).removeClass('red').addClass('orange');
});
于 2012-05-17T21:08:12.577 回答