javascript beginner: add a dynamic style in javascript?

Question

Possible Duplicate:
How to create a <style> tag with Javascript

I write a dynamic form using java-script. I want to add the style in java-script itself. I write some code to add a style. But it is not working.This is the code am write in my project.

var sheet = document.createElement('style');
sheet.type="text/css";
sheet.innerHTML = "body{color:red;}";
document.body.appendChild(sheet);

Anyone help me please.

Mmmh, it actually works in Chrome as well... maybe the issue is indeed somewhere else, but afaik, `style` element are only valid inside `head`. — Felix Kling, Jul 23 '12 at 14:26

bugwheels94 · Accepted Answer · 2012-07-23T14:32:21.587

2

Your code is fine.But i think that you are not calling it on right time, so call it when your body tag is loaded

 window.addEventListener('DOMContentLoaded',function(){
    var sheet = document.createElement('style'); 
    sheet.type="text/css"; 
    sheet.innerHTML = "body{color:red;}"; 
    document.body.appendChild(sheet);
    }, false);

edited Jul 23 '12 at 14:32

answered Jul 23 '12 at 14:21

bugwheels94

30,681
3
39
60

There isn't a need to create a file for this. You can do the same with creating a ` – Tango Bravo Jul 23 '12 at 14:23
Friend. I got a error `document.head[0]`. I want to write the whole style in java-script itself. I wont go to use css file. So explain it clearly. – yuva Jul 23 '12 at 14:34

jbabey · Answer 2 · 2012-07-23T14:41:17.890

1

Why not just add the style through a class?

.blue {
   background-color: blue;   
}

document.body.className = 'blue';

http://jsfiddle.net/kf8Nd/

If you really need a whole stylesheet, just add it to your header instead.

var sheet = document.createElement('style');
sheet.type="text/css";
sheet.innerHTML = "body{color:red;}";
document.head.appendChild(sheet); // head, not body

edited Jul 23 '12 at 14:41

answered Jul 23 '12 at 14:23

jbabey

45,965
12
71
94

+1 as downvote is entirely undeserved – David Barker Jul 23 '12 at 14:32
Friend. I want to write the whole style in java-script itself. I wont go to use css file. So explain it clearly. – yuva Jul 23 '12 at 14:33
@yuva edited for clarity, thought that part was self-explanatory. – jbabey Jul 23 '12 at 14:41
it will not work as style in body tag was not the error – bugwheels94 Jul 23 '12 at 15:22

score 1 · Answer 3 · edited May 23 '17 at 11:55

HERE you can have some more resource to increase your knowledge. And I'm sure an example will be very useful! There are some SO questions that would help you too like THIS. --Credits Peter Boughton

This was tested in IE, FF and Opera:

var css = 'h1 { background: red; }',
    head = document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if(style.styleSheet){
    style.styleSheet.cssText = css;
}else{
    style.appendChild(document.createTextNode(css));
}
head.appendChild(style);

To add a class to an element:

document.getElementById("MyElement").className += " MyClass";

To remove a class from an element:

document.getElementById("MyElement").className = 
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/ , '' )
/* code wrapped for readability - above is all one statement */

To do that in an onclick event:

<script type="text/javascript">
    function changeClass()
    {
        // code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

Better yet, use a framework (in this example jQuery) which allows you to do the following:

$j('#MyElement').addClass('MyClass');

$j('#MyElement').removeClass('MyClass');

$j('#MyElement').toggleClass('MyClass');

And also:

<script type="text/javascript">
    function changeClass()
    {
        // code examples from above
    }

    $j(':button:contains(My Button)').click(changeClass);
</script>
...
<button>My Button</button>

This is separating HTML markup from your JS interaction logic, which is something that - especially on large/complex applications - can make maintenance significantly easier.

score 0 · Answer 4 · answered Jul 23 '12 at 14:24

0

Add the style to the head element not the body

var sheet = document.createElement('style');
sheet.type="text/css";
sheet.innerHTML = "body{color:red;}";
document.head.appendChild(sheet);

answered Jul 23 '12 at 14:24

James Kyburz

13,775
1
32
33

score 0 · Answer 5 · answered Jul 23 '12 at 14:24

0

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'body{color:red;}';
document.getElementsByTagName('head')[0].appendChild(style);

answered Jul 23 '12 at 14:24

Victor Ribeiro da Silva Eloy

4,051
3
25
33

javascript beginner: add a dynamic style in javascript?

5 Answers5

Linked