我需要在JavaScript中动态创建一个CSS样式表类，并将其分配给一些HTML元素，如- div，表，span, tr等，以及一些控件，如asp:Textbox，下拉列表和数据列表。
这可能吗?
要是有样品就好了。
当前回答
简单地说，这在“所有浏览器”(特别是IE8/7)上都兼容:
function createClass(name,rules){
var style = document.createElement('style');
style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style);
if(!(style.sheet||{}).insertRule)
(style.styleSheet || style.sheet).addRule(name, rules);
else
style.sheet.insertRule(name+"{"+rules+"}",0);
}
createClass('.whatever',"background-color: green;");
最后一位将类应用于一个元素:
function applyClass(name,element,doRemove){
if(typeof element.valueOf() == "string"){
element = document.getElementById(element);
}
if(!element) return;
if(doRemove){
element.className = element.className.replace(new RegExp("\\b" + name + "\\b","g"));
}else{
element.className = element.className + " " + name;
}
}
这里还有一个小测试页面:https://gist.github.com/shadybones/9816763
关键的一点是，样式元素有一个“styleSheet”/“sheet”属性，你可以用它来添加/删除规则。
其他回答
有一个轻量级的jQuery插件可以生成CSS声明:jQuery- injectcss
事实上，它使用JSS (JSON描述的CSS)，但是为了生成动态CSS样式表，它很容易处理。
$.injectCSS({
"#test": {
height: 123
}
});
这里有一个选项:
var style = document.createElement（'style'）; style.type = 'text/css'; style.innerHTML = '.cssClass { color： #f00; }'; document.getElementsByTagName（'head'）[0].appendChild（style）; document.getElementById（'someElementId'）.className = 'cssClass'; <div id=“someElementId”>test text</div>
简单地说，这在“所有浏览器”(特别是IE8/7)上都兼容:
function createClass(name,rules){
var style = document.createElement('style');
style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style);
if(!(style.sheet||{}).insertRule)
(style.styleSheet || style.sheet).addRule(name, rules);
else
style.sheet.insertRule(name+"{"+rules+"}",0);
}
createClass('.whatever',"background-color: green;");
最后一位将类应用于一个元素:
function applyClass(name,element,doRemove){
if(typeof element.valueOf() == "string"){
element = document.getElementById(element);
}
if(!element) return;
if(doRemove){
element.className = element.className.replace(new RegExp("\\b" + name + "\\b","g"));
}else{
element.className = element.className + " " + name;
}
}
这里还有一个小测试页面:https://gist.github.com/shadybones/9816763
关键的一点是，样式元素有一个“styleSheet”/“sheet”属性，你可以用它来添加/删除规则。
一个可以帮助您完成任务的有趣项目是JSS。
JSS是一个CSS的创作工具，它允许你使用JavaScript以一种声明性的、无冲突的和可重用的方式描述样式。它可以在浏览器、服务器端或在构建时在Node中编译。
JSS库允许您使用.attach()函数在DOM/head部分中进行注入。
Repl在线版本评估。
更多关于JSS的信息。
一个例子:
// Use plugins.
jss.use(camelCase())
// Create your style.
const style = {
myButton: {
color: 'green'
}
}
// Compile styles, apply plugins.
const sheet = jss.createStyleSheet(style)
// If you want to render on the client, insert it into DOM.
sheet.attach()
使用谷歌闭包:
你可以使用ccsom模块:
goog.require('goog.cssom');
var css_node = goog.cssom.addCssText('.cssClass { color: #F00; }');
当将css节点放入文档头时，javascript代码试图跨浏览器。
