Update-CSS-Regel in Stylesheet

Question

Betrachten wir ein Stylesheet in einer HTML-Seite ist als unten

#main { 
    display: block; 
    width: 500px; 
} 

#content { 
    border: 1px solid #ccc; 
} 

jetzt gezeigt Ich habe eine Situation, wo ich die CSS-Regel von #main zu aktualisieren bedeutet, ich muss hinzufügen einige CSS-Attribute wie Farbe, Hintergrund etc.

So sollte das Stylesheet in meinem hTML-Seite unten aktualisiert werden wie gezeigt:

#main { 
    display: block; 
    width: 500px; 
    color: #333; 
    background: #fff; 
} 

#content { 
    border: 1px solid #ccc; 
} 

ich jQuery CSS verwenden können, um CSS-Regeln hinzufügen, wie unten gezeigt

$('#main').css('background','blue'); 

//but this is not adding #main in <style></style> 
//output of above jquery code is: 
//<div id='main' style="background: blue"></div> 

Was ich brauche, ist für sie CSS-Attribute hinzufügen zu einer Regel im Stylesheet (dh #main in <style></style>)

Ich bin ein Code-Editor zu entwickeln, das ist warum ich einem solchen Problem gegenüberstehe.

Answer 1

Ich denke, man kann nicht explizit CSS-Regeln im aktuellen Stil fangen, sondern als eine Arbeit um Sie einen anderen Stil auf den Kopf mit den neuen Regeln anhängen kann, wird sie die bestehenden Regeln außer Kraft setzen, wie folgt:

var newCss = "<style>#main{ 
         display:block; 
         width:500px; 
         color: #333; 
         background:#fff; 
          } 
         #content{ 
         border:1px solid #ccc; 
         } </style>"; 

$("head").append(newCss); 

Answer 2

Versuchen Sie, diese

var style="#main{display: block; 
    width: 500px; 
    color: #333; 
    background: #fff;"}; 
    $('style').append(style); 

Dies wird angenommen, dass Sie nur eine <style> Tag in Seite haben

Answer 3

Sie können hardcore CSS gelten für div perticular. ..wie dieser

$('#main').css("background":"blue"); 

Answer 4

es dauerte eine lange Zeit, aber schließlich hier gehen wir: DEMO

wenn wir die style Tag auf dem #main Element klicken, wird die Funktion erhalten geändert verwenden, die wir definiert nur , so dass es, wenn wir den Text des script Tag vor der Funktion erhalten: wird

<style>#main { 
     display: block; 
     width: 500px; 
     height:200px; 
     background-color:#000; 
    } 

    #content { 
     border: 1px solid #ccc; 
    } 
</style> 

und dann, nachdem die Funktion es genannt wird:

<style>#main { 
     display: block; 
     width: 500px; 
     height:200px; 
     background-color:#000; 
     color:#FFF; 
    } 

    #content { 
     border: 1px solid #ccc; 
    } 
</style> 

Die Funktion:

//*styleElem* is the target style tag 
//*elemToChange* is the target element that we want to change inside the style tag 
//*cssRule* is the new CSS rule that we want to add to the target element 

function addCSSToStyleTag(styleElem,elemToChange,cssRule){ 
    var oldStyle=styleElem.text(), 
     theElement=elemToChange, 
     position=oldStyle.indexOf(theElement), 
     cssToBeAdded=cssRule, 
     closingBracketIndex=oldStyle.indexOf('}',position)-1, 
     newStyle=oldStyle.substr(0,closingBracketIndex)+cssToBeAdded+oldStyle.substr(closingBracketIndex,oldStyle.length); 
    styleElem.text(newStyle); 
}; 
$('#main').one('click',function(){ 
    addCSSToStyleTag($('style'),'#main','color:#FFF;'); 
});