jQuery include css

Question

How to add css styles inside <body> or <head>, placed in javascript file like this:

<style type="text/css">
    .popup-bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #eee;
    }
</style>

The only way is to write css inside javascript, there is no access to html or any external css.

Thanks.

Mark Schultheiss · Accepted Answer · 2010-06-14 19:00:14Z

2

IF the class is defined in your structure/markup with the class then:

$(".popup-bg").css({ position: fixed, 
        left: 0, 
        top: 0, 
        width: 100%, 
        height: 100%, 
        background: #eee 
 });

OR to add it to a particular tag:

    $("body").css({ position: fixed,  
            left: 0,  
            top: 0,  
            width: 100%,  
            height: 100%,  
            background: #eee  
     });

AND to inject it:

var style = document.createElement('style'); 

style.innerText = '.popup-bg{ position: fixed,  
            left: 0,  
            top: 0,  
            width: 100%,  
            height: 100%,  
            background: #eee  
     }'; 

document.head.appendChild(style);

edited Jun 14, 2010 at 19:00

answered Jun 14, 2010 at 18:42

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

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

7 Comments

Pointy Over a year ago

I think he wants to create new <style> blocks, not set the style on individual elements.

Pointy Over a year ago

OK well that last thing is what he wants, but be aware that if you try to set "innerHTML" on a <style> element in IE (maybe not IE8 but I haven't tried) you get an exception from the browser. You have to use "innerText" instead.

Mark Schultheiss Over a year ago

so a form of my last edit, you could even add multiple text blocks (styles) to the "style" variable, then append it.

Mark Schultheiss Over a year ago

Yes, forgot the legacy IE error, edit for Text instead of HTML

Mark Schultheiss Over a year ago

Just an FYI, I believe you can clear the style with .empty(); for any styles aready on the page using jQuery $('style').empty(); IF you need to do that before adding the new style.

|

Sarfraz · Accepted Answer · 2010-06-14 18:46:10Z

1

Use addClass method of jquery:

$('body').addClass('popup-bg');

Update:

  $(function(){
    $('head').append('
      <style type="text/css">
        .popup-bg {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #eee;
        }
      </style>
    ');
  });

edited Jun 14, 2010 at 18:46

answered Jun 14, 2010 at 18:33

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

5 Comments

Happy Over a year ago

can't use it, all styles must be written inside js-file

Sarfraz Over a year ago

@Happy: We don't understand your question, please be more specific.

animuson Over a year ago

From what I got, he wants to use JavaScript to add the styles into the document after it has been loaded...

Happy Over a year ago

@Sarfraz Ahmed, I have updated the topic, now it should be more clear

Pointy Over a year ago

@Sarfraz Javascript does not allow multi-line strings.

Pointy · Accepted Answer · 2010-06-14 19:12:51Z

1

You can create <style> elements, add them to the document, and then use

 $('#styleId').text('.something { display: none; }');

or whatever.

 $('body').append($('<style/>').attr("id", "myNewStyle"));
 $('#myNewStyle').text('.something { whatever: 10px; }');

You could append your style blocks to the head, if you wanted to.

edit — multi-line style block:

 $('#myNewStyle').text(
 ' .something { ' +
 '    font-size: 12px; ' +
 '    font-weight: normal; ' +
 '    color: #e0f0e0; ' +
 ' }'
 );

edited Jun 14, 2010 at 19:12

answered Jun 14, 2010 at 18:41

Pointy

415k62 gold badges600 silver badges632 bronze badges

1 Comment

Pointy Over a year ago

Well, @Happy, that's because Javascript does not allow multi-line strings. You can put together a long string in Javascript by appending them together. If the strings have line separators in them, that will work fine (though I'm not sure what difference it makes).

Grid · Accepted Answer · 2012-08-13 07:15:56Z

1

You can also have a function that adds a class to the body which means all css in that page can detect that class

if (device.platform == "iPhone" || device.platform == "iPhone Simulator")
{
     $("body").addClass('iPhone');
}

In the header or in .css file you can reference the change without having css styles in javascript.

<style type="text/css">
    body.iPhone .popup-bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #eee;
    }
</style>

answered Aug 13, 2012 at 7:15

Grid

111 bronze badge

Comments

Stefan Kendall · Accepted Answer · 2010-06-14 18:29:46Z

0

$('body').addClass('popup-bg');

Since there is guaranteed to be only one body element, selecting on the element itself works.

answered Jun 14, 2010 at 18:29

Stefan Kendall

68.2k69 gold badges259 silver badges409 bronze badges

1 Comment

Happy Over a year ago

there are much other styles, all of them must be written in javascript file and added with it to <body> or <head>

edl · Accepted Answer · 2010-06-14 18:30:36Z

0

You can use something like $('body').addClass('popup-bg');

answered Jun 14, 2010 at 18:30

edl

3,22424 silver badges23 bronze badges

Collectives™ on Stack Overflow

jQuery include css

6 Answers 6

7 Comments

5 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

5 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related