0

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.

6 Answers 6

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); 
Sign up to request clarification or add additional context in comments.

7 Comments

I think he wants to create new <style> blocks, not set the style on individual elements.
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.
so a form of my last edit, you could even add multiple text blocks (styles) to the "style" variable, then append it.
Yes, forgot the legacy IE error, edit for Text instead of HTML
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.
|
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>
    ');
  });

5 Comments

can't use it, all styles must be written inside js-file
@Happy: We don't understand your question, please be more specific.
From what I got, he wants to use JavaScript to add the styles into the document after it has been loaded...
@Sarfraz Ahmed, I have updated the topic, now it should be more clear
@Sarfraz Javascript does not allow multi-line strings.
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; ' +
 ' }'
 );

1 Comment

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).
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>

Comments

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

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

1 Comment

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

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.