¿Cómo inyecto estilos en IE8?

Question

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

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

Como puede ver, esto no funciona en IE8!

¿Cómo puedo hacer que funcione en IE8?

Habrá un error de: 'inesperada llamada a método o propiedad de acceso' porque Internet Explorer 8 no reconoce el código HTML como válidos (parte abc)

Answer 1

En MSIE establecer el cssText-propiedad de la hoja de estilo a objetos relacionados con el <style/> -elemento:

$('<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/

Más información: http://msdn.microsoft.com/en-us/library/ie/ms533698%28v=vs.85%29.aspx

Answer 2

Estás usando jQuery, jQuery y tiene una inmensa biblioteca de métodos para cambiar dinámicamente el estilo de los elementos:

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

$(selector).propertyName(value); 

encima son sólo dos ejemplos de uso de jQuery para afectar al estilo de un elemento o grupo de elementos identificados por el selector.

Por lo tanto, para cambiar el color del elemento con id = "abc", la siguiente funcionaría:

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

Además, si lo que busca es tema de un elemento o grupo de elementos, se puede crea un archivo style.css que describe los estilos para diferentes classNames. A continuación, puede aplicar el estilo añadiendo o quitando el className al elemento (s) de esta manera:

style.css:

.custom_persona { 
    color:#000000; 
} 

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

guión 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 en mucho más detalle en términos de qué propiedades están disponibles. Esto no solo resolverá su problema IE8, sino que también funcionará en todos los otros navegadores principales.

Answer 3

Estoy de acuerdo con jmort253 en que tal vez modificar directamente los atributos de estilo o cargar un archivo css es lo mejor. A continuación, puede utilizar los métodos addClass y removeClass más eficientes. Dicho esto, los elementos de estilo deben estar en la cabeza (funcionan en el cuerpo, por supuesto, pero no son compatibles con officially, como recuerdo). Entonces puedes hacer algo como esto para ese propósito.

http://jsfiddle.net/TCUxx/1

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

Actualizado - por alguna razón esto no funciona. No sé por qué. Funciona en IE9.

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

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

Answer 4

hace este trabajo:

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

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

O

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