5

可能重复：
如何使用 Javascript 创建 <style> 标记

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

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

请任何人帮助我。

4

5 回答 5

2

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

 window.addEventListener('DOMContentLoaded',function(){
    var sheet = document.createElement('style'); 
    sheet.type="text/css"; 
    sheet.innerHTML = "body{color:red;}"; 
    document.body.appendChild(sheet);
    }, false);
于 2012-07-23T14:21:58.890 回答
1

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

.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
于 2012-07-23T14:23:14.600 回答
1

在这里，您可以获得更多资源来增加您的知识。我相信一个例子会非常有用！有一些 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 交互逻辑分开，这可以使维护变得更加容易，尤其是在大型/复杂的应用程序上。

于 2012-07-23T14:25:22.683 回答
0

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

var sheet = document.createElement('style');
sheet.type="text/css";
sheet.innerHTML = "body{color:red;}";
document.head.appendChild(sheet);
于 2012-07-23T14:24:18.857 回答
0 
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'body{color:red;}';
document.getElementsByTagName('head')[0].appendChild(style);
于 2012-07-23T14:24:55.957 回答