Come si iniettano gli stili in IE8?

Question

// create a style element 
$("#main").html('<style id="custom_persona_css"></style>'); 

$("#custom_persona_css").append('#abc{ color:#000000; }'); 

Come si può vedere, questo non funziona in IE8!

Come posso farlo funzionare in IE8?

Ci sarà un errore di: 'chiamata inaspettata al metodo o una proprietà di accesso' perché IE8 non riconosce il codice html come valido (abc parte)

Answer 1

In MSIE impostare la cssText-proprietà del foglio di stile-oggetto relativo alla <style/> -element:

$('<style id="custom_persona_css"></style>').appendTo('head'); 

    if($.browser.msie) 
    { 
    $("#custom_persona_css").prop('styleSheet').cssText='#abc{ color:#000000; }'; 
    } 
    else 
    { 
    $("#custom_persona_css").append('#abc{ color:#000000; }'); 
    } 

http://jsfiddle.net/doktormolle/BLJUv/

Ulteriori informazioni: http://msdn.microsoft.com/en-us/library/ie/ms533698%28v=vs.85%29.aspx

Answer 2

Stai utilizzando jQuery, jQuery e ha una immensa biblioteca di metodi per modificare dinamicamente lo stile degli elementi:

$(selector).css(propertyName, value); 

$(selector).propertyName(value); 

Sopra sono solo due esempi di utilizzo di jQuery per influenzare lo stile di un elemento o gruppo di elementi individuati dal selettore.

Così, per cambiare il colore dell'elemento con id = "abc", il seguente avrebbe funzionato:

$('#abc').css('color','#000000'); 

Inoltre, se stai cercando di tema un elemento o gruppo di elementi, è possibile creare un file style.css che descriva gli stili per diversi nomi di classi. Poi si può semplicemente applicare lo stile aggiungendo o rimuovendo il className all'elemento (s) in questo modo:

style.css:

.custom_persona { 
    color:#000000; 
} 

.some_other_custom_style { 
    color:red; 
    background-color: #fff; 
} 

sceneggiatura index.html:

$('#abc').addClass('custom_persona'); 

// OR 

$('#abc').addClass('.some_other_custom_style'); 
$('#abc').removeClass('custom_persona'); 

jQuery CSS category of methods and properties entra molto più in dettaglio in termini di quali proprietà sono disponibili. Questo non solo risolverà il tuo problema IE8, ma funzionerà anche in tutti gli altri principali browser.

Answer 3

Sono d'accordo con jmort253 che forse la modifica diretta degli attributi di stile o il caricamento di un file css è la cosa migliore. È quindi possibile utilizzare i metodi addClass e removeClass più efficienti. Detto questo, gli elementi di stile dovrebbero essere nella testa (funzionano naturalmente nel corpo, ma non sono supportati allo officially come ricordo). Quindi puoi fare qualcosa di simile a questo scopo.

http://jsfiddle.net/TCUxx/1

$('head').append('<style type="text/css">#abc{ color:#ff0000; }</style>'); 

Aggiornamento - per qualche motivo questo non funziona. Non so perché. Funziona in IE9.

var $styleElement = $('<style />', { 
    type: 'text/css', 
    text: '#abc{ color:#ff0000; }' 
}); 

$('head').append($styleElement); 

Answer 4

fa questo lavoro:

var $style = $("#custom_persona_css"); 

$style.html(
    $style.html() + '#abc{ color:#000000; }' 
); 

O

$("#custom_persona_css")[0].innerHTML += '#abc{ color:#000000; }'