benske benske - 4 months ago 12
jQuery Question

Put CSS in header with JS

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!

Answer

Using jQuery, you could do something like this:

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