CODEWITHSUNDEEP
javascriptjqueryhtmlcssinternet-explorer-8
TIMEX
TIMEX

Reputation: 271764

How do I inject styles into IE8?

// 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)

Upvotes: 6

Views: 2489

Answers (4)

mrtsherman
mrtsherman

Reputation: 39872

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);

Upvotes: 4

Dr.Molle
Dr.Molle

Reputation: 117334

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

Upvotes: 4

qwertymk
qwertymk

Reputation: 35276

Does this work:

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

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

Or

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

Upvotes: 0

jamesmortensen
jamesmortensen

Reputation: 34038

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.

Upvotes: 0

Related Questions