如何在IE8中注入样式？

Question

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

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

As you can tell, this does not work in IE8!

How can I make it work in IE8?

There will be an error of : 'unexpected call to method or property access' because IE8 does not recognize the html as valid (abc part)

Answer 1

I agree with jmort253 that perhaps directly modifying style attributes, or loading a css file is best. You can then use the more efficient addClass and removeClass methods. That being said, style elements should be in the head (they work in body of course, but aren't officially supported as I recall). So you can do something like this for that purpose.

http://jsfiddle.net/TCUxx/1

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

Updated - for some reason this doesn't work. I don't know why. Works in IE9.

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

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

Answer 2

In MSIE set the cssText-property of the styleSheet-object related to the <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/

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

Answer 3

You're using jQuery, and jQuery has an immense library of methods for dynamically changing the style of elements:

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

$(selector).propertyName(value);

Above are just two examples of usage of jQuery to affect the style of an element or group of elements identified by the selector.

Thus, to change the color of the element with id="abc", the following would work:

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

Additionally, if you're looking to theme an element or group of elements, you can create a style.css file outlining styles for different classNames. Then you can simply apply the style by adding or removing the className to the element(s) like so:

style.css:

.custom_persona {
    color:#000000;
}

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

index.html script:

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

// OR

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

jQuery CSS category of methods and properties goes into much more detail in terms of what properties are available. Not only will this solve your IE8 issue, but this will work in all of the other major browsers as well.

Answer 4

Does this work:

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

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

Or

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