javascript beginner: add a dynamic style in javascript? [duplicate]

问题

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.

回答1:

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

回答2:

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.

回答3:

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

回答4:

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

回答5:

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

来源：https://stackoverflow.com/questions/11614382/javascript-beginner-add-a-dynamic-style-in-javascript

标签

javascript

css