13

このクラスがあるとします：

.MyClass{background:red;}

このクラスは、いくつかの div に適用されます。MyClass で定義されている色を変更して、背景の色をオレンジ色に変更したいと考えています。

今、私は私ができることを知っています$('.MyDiv').css('background', 'orange');

しかし、私の質問は本当にこれです: MyClass 要素が持つように CSS クラス定義を変更するにはどうすればよい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. 異なるプロパティを持つ2番目のクラスがあり、これらの要素のクラス名を変更します
于 2012-05-17T21:09:13.910 に答える
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 に答える
0

あなたの質問を見て、クラスのプロパティを動的に変更するよりも、JavaScript を使用してMyClassを別のものに切り替える方が良いと思います。

ただし、まだ熱心な場合は、jQuery http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/で CSS スタイルシートを切り替えることができます。

于 2012-05-17T21:22:15.830 に答える
-2

クラスを変更しようとするのではなく、クラスを追加および削除する方がはるかに優れています。

例えば

.red {
    background: red;
}

.orange {
    background: orange;
}

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