我需要在JavaScript中动态创建一个CSS样式表类,并将其分配给一些HTML元素,如- div,表,span, tr等,以及一些控件,如asp:Textbox,下拉列表和数据列表。

这可能吗?

要是有样品就好了。


当前回答

有一个轻量级的jQuery插件可以生成CSS声明:jQuery- injectcss

事实上,它使用JSS (JSON描述的CSS),但是为了生成动态CSS样式表,它很容易处理。

$.injectCSS({
    "#test": {
        height: 123
    }
});

其他回答

使用谷歌闭包:

你可以使用ccsom模块:

goog.require('goog.cssom');
var css_node = goog.cssom.addCssText('.cssClass { color: #F00; }');

当将css节点放入文档头时,javascript代码试图跨浏览器。

这里有一个选项:

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>

一个可以帮助您完成任务的有趣项目是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()

有一个轻量级的jQuery插件可以生成CSS声明:jQuery- injectcss

事实上,它使用JSS (JSON描述的CSS),但是为了生成动态CSS样式表,它很容易处理。

$.injectCSS({
    "#test": {
        height: 123
    }
});

为了搜索者的利益;如果你正在使用jQuery,你可以做以下事情:

var currentOverride = $('#customoverridestyles');

if (currentOverride) {
 currentOverride.remove();
}

$('body').append("<style id=\"customoverridestyles\">body{background-color:pink;}</style>");

显然,你可以改变内部css为任何你想要的。

有些人更喜欢纯JavaScript,但它可以工作,并且在动态编写/覆盖样式方面非常健壮。