CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vignesh Pichamani
Vignesh Pichamani

Reputation: 8070

Internal CSS using jquery

Good Day!!!

I am trying to add the css using jquery. when i viewing the code using firebug. It looks like in inline css format. But i want to load the internal css property using jquery. Is it possible to add the internal css using jquery. 

 $('selector').css('color','#fff');

It appear like For example

<p style="color:#fff"></p>

I want to load as with

<style type="text/css">
p {
color:#fff;
}
</style>

Not sure, how to do it any one review and advise.

Thanks

enter image description here

Upvotes: 1

Views: 1668

Answers (4)

Bindiya Patoliya
Bindiya Patoliya

Reputation: 2764

Yes you can, just append a style tag to the head:

$("head").append('<style type="text/css">p {color:#fff;}</style>');

see example here jsfiddle

Upvotes: 4

theLaw
theLaw

Reputation: 1291

You can try to append the style to the head like this

var headID = document.getElementsByTagName("head")[0];
$(headID).append('<style type="text/css">p { color:#fff; } </style>');

Upvotes: 1

kapil_dev
kapil_dev

Reputation: 86

When you add style by jquery it will be for particular id or class. so it will be display in HTML as inline css.

Upvotes: 0

Maciej Małecki
Maciej Małecki

Reputation: 2745

you can define classes (or ids) earlier in head or in external css file and than add this class using jquery

$('p').addClass('my-style');

Upvotes: 1

Related Questions