JavaScript初学者：如何在JavaScript中添加动态样式？

Question

可能是重复问题：
如何使用JavaScript创建

- yuva

---

style元素必须在head中。 - Felix Kling

在@FelixKling上加1，将那个东西附加到头部。 - Tango Bravo

嗯，它在Chrome中确实也可以工作...也许问题确实出在其他地方，但据我所知，style元素只能在head内部有效。 - Felix Kling

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

- bugwheels94

---

不需要为此创建文件。您可以通过创建<style>元素来实现相同的效果。如果这是在CMS中且他没有FTP访问权限，则可能会很困难。 - Tango Bravo

朋友，我遇到了一个错误 document.head[0]。我想要在 JavaScript 中编写整个样式，而不使用 CSS 文件。所以请清楚地解释一下。 - yuva

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

- jbabey

---

+1 作为负面评价是完全不应该的。 - David Barker

朋友，我想要在JavaScript中编写整个样式，不使用CSS文件。因此，请清楚地解释一下。 - yuva

@yuva编辑了一下，以使那部分更加清晰，认为那部分是不言自明的。 - jbabey

它不起作用是因为 body 标签中的样式不是错误。 - bugwheels94

Answer 3

在这里，你可以获得更多资源来增加你的知识。我相信一个例子会非常有用！还有一些 Stack Overflow 的问题也会对你有所帮助，比如这个。--Credits 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交互逻辑分离，特别是在大型/复杂应用程序上，可以使维护工作变得更加容易。

- waldyr.ar

Answer 4

将样式添加到 head 元素而不是 body 元素。

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

- James Kyburz

Answer 5

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

- Victor Ribeiro da Silva Eloy