बदलते CSS वर्ग परिभाषा

मान लीजिए मैं इस वर्ग है:बदलते CSS वर्ग परिभाषा

.MyClass{background:red;}

इस वर्ग के कई divs पर लागू होता है। मैं MyClass में परिभाषित रंग को बदलकर पृष्ठभूमि के रंग को नारंगी में बदलना चाहता हूं।

अब, मैं जानता हूँ कि मैं $('.MyDiv').css('background', 'orange');

कर सकता है लेकिन मेरे सवाल यह वास्तव में है: मैं CSS वर्ग परिभाषा कैसे बदल सकता हूँ ताकि MyClass तत्वों अब background:orange; है? मैं कई सीएसएस रंग गुणों को एक रंग से दूसरे रंग में बदलने में सक्षम होना चाहता हूं।

धन्यवाद।

स्रोत

2012-05-17 frenchie

मुझे नहीं लगता कि यह संभव है है। –

संभावित डुप्लिकेट: http://stackoverflow.com/questions/730048/how-to-change-remove-css-classes-definitions-at-runtime – YMMD

$ ('MyDiv')। सीएसएस ('पृष्ठभूमि', ' नारंगी'); * आईएस * कक्षा 'एमडीडीव' की परिभाषा बदल रहा है। इसके अलावा, नहीं। आप निश्चित रूप से सीएसएस फ़ाइल को संपादित नहीं कर सकते हैं। $ .css() फ़ंक्शन गतिशील रूप से बदलते सीएसएस का एक तरीका प्रदान करता है, लेकिन यह कई गुणों के साथ बोझिल हो सकता है। – OnResolve

असल में अपनी स्टाइलशीट को बदलना बहुत चुनौतीपूर्ण है। अधिक आसानी से, हालांकि, आप को अपनी स्टाइलशीट को अलग-अलग के लिए स्विच कर सकते हैं, जो आपके उद्देश्यों के लिए पर्याप्त हो सकता है। How do I switch my CSS stylesheet using jQuery? देखें।

वास्तव में स्टाइलशीट सामग्री को बदलने के लिए, How to change/remove CSS classes definitions at runtime? आपको प्रारंभ हो जाएगा।

स्रोत

2012-05-17 21:06:58 chaos

हाँ, मुझे पता है कि यह बहुत मुश्किल है ... मैं स्टाइलशीट स्विच नहीं कर रहा हूं। – frenchie

ठीक है, धन्यवाद। लिंक वह जगह है जहां मुझे वह उत्तर मिला जो मैं ढूंढ रहा हूं। – frenchie

-1

आप उन्हें बदलने की कोशिश करने के बजाय कक्षाओं को जोड़ने और हटाने से बेहतर होगा।

उदाहरण

.red { 
    background: red; 
} 

.orange { 
    background: orange; 
} 

$('#div').click(function(){ 
    $(this).removeClass('red').addClass('orange'); 
});

स्रोत

2012-05-17 21:08:12 xbonez

नहीं, आप समझ में नहीं आते हैं। बेशक मुझे पता है कि मैं यह कर सकता हूं ... – frenchie

के लिए आप 2 विकल्प

एक नया स्टाइलशीट ओवरराइड करता है कि इस .MyClass
विभिन्न संपत्ति के साथ एक द्वितीय श्रेणी है जोड़ने के लिए, और बदल इन पर वर्ग का नाम है तत्व

स्रोत

2012-05-17 21:09:13 Ibu

आपके प्रश्न को देखते हुए, मुझे लगता है कि अब ईटर दृष्टिकोण स्विच करना है MyClass गतिशील रूप से कक्षा के गुणों को बदलने के बजाय जावास्क्रिप्ट का उपयोग करके कुछ और के साथ।

लेकिन अगर आप अभी उत्सुक आप jQuery http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

स्रोत

2012-05-17 21:22:15 shingokko

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-22 17:51:00 tqwhite

के साथ सीएसएस स्टाइलशीट स्विच कर सकते हैं कर रहे हैं क्योंकि आप document.styleSheets[i].cssRules सरणी के माध्यम से पुनरावृति करने के लिए है नियम आप चाहते हैं खोजने के लिए मुश्किल है। (और selectorText विशेषता के साथ अपने वर्ग के नाम की तुलना करें)
तो इस समस्या का मेरा समाधान एक नया सीएसएस वर्ग जोड़ना है, एचटीएमएल तत्व से पुरानी सीएसएस कक्षा को हटा देना और इसके बजाय इस वर्ग को जोड़ना है।

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() { 
 
\t var length = 0; 
 
\t if (document.styleSheets[1].cssRules) { 
 
\t \t length = document.styleSheets[1].cssRules.length; 
 
\t } else if (document.styleSheets[1].rules) { //ie 
 
\t \t length = document.styleSheets[1].rules.length; 
 
\t } 
 
\t return length; 
 
} 
 
function insertCssRule(rule, index) { 
 
\t if (document.styleSheets[1].cssRules) { 
 
\t \t document.styleSheets[1].insertRule(rule, index); 
 
\t } else if (document.styleSheets[1].rules) { //ie 
 
\t \t document.styleSheets[1].addRule(rule, index); 
 
\t } 
 
}

स्रोत

2014-11-14 12:53:25 user3257710

बदलते CSS वर्ग परिभाषा

उत्तर

संबंधित मुद्दे