How to embed styles in 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?

I get the error message "unexpected method call or property access" because IE8 does not recognize html as valid (abc part)

Answer 1

In MSIE, set the cssText property of the styleSheet object associated with the <style/> -element 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/

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

Answer 2

I agree with jmort253, perhaps by directly changing the style attributes, or it is best to download the css file. Then you can use the more efficient addClass and removeClass methods. At the same time, style elements should be in the head (they work in the body, of course, but are not officially supported, as I recall). Therefore, you can do something similar for this purpose.

http://jsfiddle.net/TCUxx/1

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

Updated - for some reason this does not work. I do not know why. It works in IE9.

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

Answer 3

You are using jQuery, and jQuery has a huge library of methods for dynamically changing the style of elements:

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

The above are two examples of using jQuery to influence the style of an element or group of elements identified by a selector.

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

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

In addition, if you are looking for a theme for an element or group of elements, you can create a style.css file that describes styles for different class names. Then you can simply apply the style by adding or removing the class name for the element (s) as follows:

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 The category and methods of the CSS class are described in detail in terms of what properties are available. Not only will this solve your IE8 problem, but it will work in all other major browsers as well.

Answer 4

It works:

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

or

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