javascript初学者：在javascript中添加动态样式？ [复制]答案

【问题标题】：javascript beginner: add a dynamic style in javascript? [duplicate]javascript初学者：在javascript中添加动态样式？ [复制]
【发布时间】：2012-07-21 19:09:16
【问题描述】：

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

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

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

请任何人帮助我。

【问题讨论】：

style 元素必须在 head 中。
+1 on @FelixKling 将那只小狗附加到头部。
嗯，它实际上也适用于 Chrome……也许问题确实出在其他地方，但是 afaik，style 元素仅在 head 内有效。

标签： javascript css

【解决方案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);

【讨论】：

不需要为此创建文件。您可以通过创建<style> 元素来执行相同的操作。如果这是在 CMS 中并且他没有 FTP 访问权限，这可能是一件困难的事情。
朋友。我收到一个错误document.head[0]。我想用 java-script 本身编写整个样式。我不会去使用css文件。所以解释清楚。

【解决方案2】：

HERE你可以有更多的资源来增加你的知识。我相信一个例子会非常有用！有一些 SO 问题也会对您有所帮助，例如 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 交互逻辑分开，这可以大大简化维护工作，尤其是在大型/复杂应用程序上。

【讨论】：

【解决方案3】：

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

.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

【讨论】：

+1 因为反对票是完全不值得的
朋友。我想用 java-script 本身编写整个样式。我不会去使用css文件。所以解释清楚。
@yuva 为清楚起见进行了编辑，认为该部分是不言自明的。
它不会起作用，因为 body 标签中的样式不是错误

【解决方案4】：

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

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

【讨论】：