Adding css rules with text method to style element does not work in IE

Question

It works fine in Firefox and Chrome, but does not work in IE8. Here is the html structure:

Answer 1

Personally I would do this.

var styles = {
  margin: '0',
  padding: '5px',
  border: 'solid 0px black'
}

$('body').css(styles);

Answer 2

Try the css function in jQuery:

$( 'body' ).css( { margin: 0 } )

Answer 3

I was having the same problem with a dependency plug-in for jQuery, just use this code:

$('head').append('<style>' + content + '</style>');

then your code will work in almost all browsers, here "content" is a variable you define externally and it will contain the data you want to insert into <style> tags. it will certainly work.

Answer 4

try: $('<div/>').load("style.css",function(style){ $(data.appendTo).append('<style type="text/css">' + style + '</style>'); });

Answer 5

To dynamically load a CSS file using JQuery.

var link = $("<link>");
link.attr({
    type: 'text/css',
    rel: 'stylesheet',
    href: <your CSS file url>
});
$("head").append( link ); 

Answer 6

This is working for me in IE7:

$('<style type="text/css">body {margin: 0;}</style>').appendTo($('head'));

Another syntax which might be easier to read:

$('head').append('<style type="text/css">body {margin:0;}</style>');

However, calling either .text(val) or .html(val) to set the contents of the style tag will cause an exception to be thrown because they set the innerHTML DOM property which is read-only.

Here is IE's documentation of the innerHTML property:

The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.