我使用 java 脚本编写了一个动态表单。我想在 java-script 本身中添加样式。我写了一些代码来添加样式。但它不起作用。这是我在我的项目中编写的代码。
var sheet = document.createElement('style');
sheet.type="text/css";
sheet.innerHTML = "body{color:red;}";
document.body.appendChild(sheet);
请任何人帮助我。
我使用 java 脚本编写了一个动态表单。我想在 java-script 本身中添加样式。我写了一些代码来添加样式。但它不起作用。这是我在我的项目中编写的代码。
var sheet = document.createElement('style');
sheet.type="text/css";
sheet.innerHTML = "body{color:red;}";
document.body.appendChild(sheet);
请任何人帮助我。
你的代码很好。但我认为你没有在正确的时间调用它,所以当你的身体标签被加载时调用它
window.addEventListener('DOMContentLoaded',function(){
var sheet = document.createElement('style');
sheet.type="text/css";
sheet.innerHTML = "body{color:red;}";
document.body.appendChild(sheet);
}, false);
为什么不直接通过类添加样式?
.blue {
background-color: blue;
}
document.body.className = 'blue';
如果您真的需要一个完整的样式表,只需将其添加到您的标题中即可。
var sheet = document.createElement('style');
sheet.type="text/css";
sheet.innerHTML = "body{color:red;}";
document.head.appendChild(sheet); // head, not body
在这里,您可以获得更多资源来增加您的知识。我相信一个例子会非常有用!有一些 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 交互逻辑分开,这可以使维护变得更加容易,尤其是在大型/复杂的应用程序上。
将样式添加到头部元素而不是正文
var sheet = document.createElement('style');
sheet.type="text/css";
sheet.innerHTML = "body{color:red;}";
document.head.appendChild(sheet);
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'body{color:red;}';
document.getElementsByTagName('head')[0].appendChild(style);