ansaurus

Question

$('<style></style>').text('css').appendTo('head') does not work in IE?

Answer 1

A:

Try the css function in jquery

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

hookedonwinter 2010-04-22 16:49:42

what if I need to append a lot of CSS rules? For example, I want to inject a whole CSS file into the HTML?

powerboy 2010-04-22 16:52:09

why don't you just insert it?<link href="file.css" type="text/css" rel="stylesheet" />

Jeremy B. 2010-04-22 16:55:08

Because I want to insert some CSS rules on demand. In some cases the webpage does not need those rules if a user does not trigger an event. Attached an extra CSS file require another HTTP request.

powerboy 2010-04-22 17:00:15

@powerboy I could see that being a problem if you have a lot of things to add. You could do it all my way, but it would be a lot of find and replace! How many rules do you have?

hookedonwinter 2010-04-22 17:02:39

I see, reference my answer to see how to insert a CSS file on demand.

Jeremy B. 2010-04-22 17:02:51

Answer 2

A:

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

Jeremy B. 2010-04-22 16:58:13

`$('<div>hello world</div>').appendTo($('body'));` will create a new div and append it to the body. It's not a selector.

Ken Browning 2010-04-22 17:04:29

@Jeremy B - You solution is inserting a CSS file dynamically. But what I am looking for is an easy way to insert several (but not only one) CSS rules (not a CSS file) dynamically, since attaching another CSS file initializes another HTTP request. My program needs to run very fast and the server can be quite busy sometimes. I need to do everything to reduce the response time.

powerboy 2010-04-22 17:07:23

I'm not sure how long you think the http request will take, but as far as it goes, I don't believe loading all the CSS rules, and then NOT using them will be faster than getting the CSS file you'll need, unless you are looking at just a few CSS rules. How much CSS are we talking about?

Jeremy B. 2010-04-22 17:11:13

Those CSS rules can be written in JS in advance, so they are transmitted in the same HTTP request with the JS file. I just want those CSS rules to apply to the webpage on demand.

powerboy 2010-04-22 17:14:33

Answer 3

+5 A:

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.

Ken Browning 2010-04-22 16:59:25

I'm having the same issue with text and html in IE8.

drs9222 2010-04-22 17:13:36

@Ken Browning - Yes, I have already tried the same thing as your solution. It does work in IE8 and compatibility view. But I just think that <code>var rules = '100 letters here'; $('<style type="text/css"></style>').text(rules).appendTo('head'); </code> looks prettier than <code>var rules = '100 letters here'; $('<style type="text/css">' + rules + '</style>').appendTo('head'); </code>

powerboy 2010-04-22 17:20:52

You can choose pretty or working. Up to you. IE seems to think `innerHTML` should be read-only for `style` elements.

Ken Browning 2010-04-22 17:22:12

I'm using JQuery 1.4.1 with IE8 in standards mode and $('<style></style).text('...') will not work but $('<span></span).text('...'). I can't even append to a style element created like this.

drs9222 2010-04-22 17:24:12

"IE seems to think innerHTML should be read-only for style elements". Maybe that is the point!

powerboy 2010-04-22 17:26:59

A digression: anybady know if there is a comprehensive collection of cross-browser issues (especially for the stupid IE) on the web? CSS hacks, JS hacks, etc. A comprehensive one!

powerboy 2010-04-22 17:36:05

+1 Good find Ken

Josh Stodola 2010-04-22 18:16:57

Answer 4

A:

Personally I would do this.

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

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

James Westgate 2010-04-22 17:44:27

ahh...this solution looks pretty! But if we need to apply multiple rules to different DOM elements, it will become wordy.

powerboy 2010-04-22 18:09:53

ansaurus

tags:

views:

answers:

$('<style></style>').text('css').appendTo('head') does not work in IE?

related questions