Question

可能重复：
How to create a <style> tag with Javascript

我使用java-script编写动态表单。我想在java脚本中添加样式。我写了一些代码来添加样式。但它没有用。这是我在项目中编写的代码。

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

任何人都会帮助我。

Answer 1

你的代码很好。但我认为你没有在正确的时间调用它，所以在你的body标签加载时调用它

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

Answer 2

为什么不通过类添加样式？

.blue {
   background-color: blue;   
}

document.body.className = 'blue';

http://jsfiddle.net/kf8Nd/

如果您确实需要一个完整的样式表，只需将其添加到标题中即可。

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

Answer 3

HERE你可以拥有更多资源来增加你的知识。而且我确定一个例子非常有用！有些问题可以帮助你THIS。 - 积分Peter Boughton

这是在IE，FF和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);

向元素添加类：

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

从元素中删除类：

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

要在onclick事件中执行此操作：

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

更好的是，使用一个框架（在本例中为jQuery），它允许您执行以下操作：

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

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

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

还有：

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

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

这是将HTML标记与JS交互逻辑分开，特别是在大型/复杂应用程序上，可以使维护变得更加容易。

Answer 4

将样式添加到头部元素而不是正文

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

Answer 5

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

javascript初学者：在javascript中添加动态样式？

5 个答案: