Put CSS in header with JS

Question

I have to put CSS (block in the header) with Javascript or JQuery in the header of the current page. The css is in text format, like this (it comes from a server):

label { font-family: Verdana, sans-serif; font-size: 12px; display: block; }
input { padding: 3px 5px; width: 250px; margin: 0 0 10px; }
input[type="file"] { padding-left: 0; }
input[type="submit"] { width: auto; }

I want to put this CSS in the header block, with JavaScript like this:

<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<style type="text/css">
    label { font-family: Verdana, sans-serif; font-size: 12px; display: block; }
    input { padding: 3px 5px; width: 250px; margin: 0 0 10px; }
    input[type="file"] { padding-left: 0; }
    input[type="submit"] { width: auto; }
</style>
</head>

Is it possible?

Thanks!

RoccoC5 · Accepted Answer · 2011-12-08 16:35:15Z

3

Using jQuery, you could do something like this:

 $('<style type="text/css"> ' + myCSS + '</style>').appendTo('head');

answered Dec 8, 2011 at 16:35

RoccoC5

4,21320 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gabitzish · Accepted Answer · 2011-12-08 16:35:34Z

2

You can use jquery to do this. Do something like this:

$("head").append("<style type=\"text/css\">" + {your content} + "</style>");

answered Dec 8, 2011 at 16:35

gabitzish

9,7117 gold badges47 silver badges67 bronze badges

Comments

Jason Gennaro · Accepted Answer · 2011-12-08 16:34:54Z

1

Using jQuery, you should be able to do an append

$('head').append(' //stick the whole thing here ');

answered Dec 8, 2011 at 16:34

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:22:36Z

0

Yes it's possible, checkout this tutorial so you can understand how it's done: http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS

Edit: If you don't need to run the script in the body, there is a similar question here: Add CSS to <head> with JavaScript?

function addcss(css){
    var head = document.getElementsByTagName('head')[0];
    var styleElement = document.createElement('style');
    styleElement.setAttribute('type', 'text/css');
    if (styleElement.styleSheet) {   // IE
        styleElement.styleSheet.cssText = css;
    } else {                // the world
        styleElement.appendChild(document.createTextNode(css));
    }
    head.appendChild(styleElement);
 }

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Dec 8, 2011 at 16:35

alessioalex

63.8k16 gold badges158 silver badges123 bronze badges

Comments

James Yang · Accepted Answer · 2016-08-03 15:24:39Z

0

I found this lib may help:

https://github.com/cssobj/cssobj

It's render CSSOM from JS into <head>, and you can change rules directly from JS Object.

DEMO: https://cssobj.github.io/cssobj-demo/

answered Aug 3, 2016 at 15:24

James Yang

1,4164 gold badges18 silver badges27 bronze badges

Comments

pna · Accepted Answer · 2011-12-08 16:37:53Z

-1

Try with this:

<script type="text/javascript">
 var css = document.createElement('style');
 css.type = 'text/css';

 var styles = 'your_server_response_css_rules';

 if (css.styleSheet)
     css.styleSheet.cssText = styles;
 else 
     css.appendChild(document.createTextNode(styles));

 document.getElementsByTagName("head")[0].appendChild(css);
</script>

answered Dec 8, 2011 at 16:37

pna

5,7513 gold badges25 silver badges37 bronze badges

Collectives™ on Stack Overflow

Put CSS in header with JS

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related