Adding CSS to head tag from the body using jQuery

Question

I've seen two methods of adding CSS to the head of an HTML page from the body using JavaScript and jQuery, which is preferred?

$('head').append("<style type='text/css'> my CSS <\/script>");

or

  var styleElement = document.createElement('style');
  var styleText = 'my CSS';
  var headElements = document.getElementsByTagName('head');
  styleElement.type = 'text/css';
  if (headElements.length == 1) {
    headElements[0].appendChild(styleElement);
  } else if (document.head) {
    document.head.appendChild(styleElement);
  }
  if (styleElement.styleSheet) { // IE
      styleElement.styleSheet.cssText = styleText;
  } else { // Other browsers
      var textNode = document.createTextNode(styleText);
      styleElement.appendChild(textNode);
  }

Obviously the first is a lot shorter, but is it less accepted?

At least the second won't work, since it is missing appending to headElement. — VisioN
– VisioN, Commented May 10, 2012 at 13:43
@VisioN also, gEBTN returns an arraylike structure; you need to grab the first element out of the value it returns. var headElement = document.getElementsByTagName('head')[0]; — Matt Ball
– Matt Ball, Commented May 10, 2012 at 13:44

Richard Neil Ilagan · Accepted Answer · 2012-05-10 13:49:27Z

It's a question of readability vs performance, I think.

People would argue (and they'd be normally correct) that doing stuff the raw Javascript way is faster than if done with jQuery --- and why wouldn't that be? jQuery abstracts the raw Javascript calls from what you're doing to present nice syntax and convenience. That means that you'll incur additional overhead when using jQuery, as your commands will zig and zag through it's innards until it gets to the part where it "translates" what you're doing into raw Javascript code.

But then again, writing raw Javascript code can not only be tedious from time to time (just look at all that code!), but also susceptible to cross-browser problems (which jQuery attempts to normalize), and can be harder to read to the uninitiated. Is the performance benefit really worth it?

It's a matter of where and what you're trying to do, honestly. Here, I'd say that the benefits of going raw Javascript is negligible. Hit that up in jQuery.

marteljn · Accepted Answer · 2012-05-10 13:47:41Z

1

Your first option is an acceptable way of adding CSS to the head section. Using JQuery will provide the most cross-browser compatible solution.

answered May 10, 2012 at 13:47

marteljn

6,5263 gold badges32 silver badges44 bronze badges

Comments

Amberlamps · Accepted Answer · 2012-05-10 13:49:58Z

1

What do you mean by accepted? When you use jQuery your code has only one line but the jQuery framework will most likely do the same as you mentioned in your second idea of implementing. When you are already using jQuery you might wanna stick to jQuery. But dont include the whole framework if you are only using it for that purpose.

answered May 10, 2012 at 13:49

Amberlamps

40.7k6 gold badges46 silver badges54 bronze badges

Collectives™ on Stack Overflow

Adding CSS to head tag from the body using jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related