我需要在JavaScript中动态创建一个CSS样式表类,并将其分配给一些HTML元素,如- div,表,span, tr等,以及一些控件,如asp:Textbox,下拉列表和数据列表。
这可能吗?
要是有样品就好了。
我需要在JavaScript中动态创建一个CSS样式表类,并将其分配给一些HTML元素,如- div,表,span, tr等,以及一些控件,如asp:Textbox,下拉列表和数据列表。
这可能吗?
要是有样品就好了。
当前回答
通过查看答案,最明显和最直接的是缺少:使用document.write()写出你需要的CSS块。
下面是一个例子(在codepen上查看:http://codepen.io/ssh33/pen/zGjWga):
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
.d, body{ font: 3vw 'Open Sans'; padding-top: 1em; }
.d {
text-align: center; background: #aaf;
margin: auto; color: #fff; overflow: hidden;
width: 12em; height: 5em;
}
</style>
<script>
function w(s){document.write(s)}
w("<style>.long-shadow { text-shadow: ");
for(var i=0; i<449; i++) {
if(i!= 0) w(","); w(i+"px "+i+"px #444");
}
w(";}</style>");
</script>
<div class="d">
<div class="long-shadow">Long Shadow<br> Short Code</div>
</div>
其他回答
以下是我的模块化解决方案:
var final_style = document.createElement('style');
final_style.type = 'text/css';
function addNewStyle(selector, style){
final_style.innerHTML += selector + '{ ' + style + ' } \n';
};
function submitNewStyle(){
document.getElementsByTagName('head')[0].appendChild(final_style);
final_style = document.createElement('style');
final_style.type = 'text/css';
};
function submitNewStyleWithMedia(mediaSelector){
final_style.innerHTML = '@media(' + mediaSelector + '){\n' + final_style.innerHTML + '\n};';
submitNewStyle();
};
基本上你在代码的任何地方都可以: addNewStyle('body', 'color: ' + color1);,其中color1为已定义变量。
当你想要“发布”当前CSS文件时,你只需做submitNewStyle(), 之后你还可以添加更多的CSS。
如果你想添加“媒体查询”,你可以选择。 在“addingNewStyles”之后,你只需使用submitNewStyleWithMedia('min-width: 1280px');。
这对我的用例非常有用,因为我正在根据当前时间更改公共(不是我的)网站的CSS。我在使用“活动”脚本之前提交一个CSS文件,然后提交其余的文件(使站点看起来有点像它应该在通过querySelector访问元素之前)。
有一个轻量级的jQuery插件可以生成CSS声明:jQuery- injectcss
事实上,它使用JSS (JSON描述的CSS),但是为了生成动态CSS样式表,它很容易处理。
$.injectCSS({
"#test": {
height: 123
}
});
一个可以帮助您完成任务的有趣项目是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()
https://jsfiddle.net/xk6Ut/256/
在JavaScript中动态创建和更新CSS类的一个选项:
使用样式元素创建CSS节 使用样式元素的ID,以便我们可以更新CSS 类
…
function writeStyles(styleName, cssText) {
var styleElement = document.getElementById(styleName);
if (styleElement)
document.getElementsByTagName('head')[0].removeChild(
styleElement);
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = styleName;
styleElement.innerHTML = cssText;
document.getElementsByTagName('head')[0].appendChild(styleElement);
}
...
var cssText = '.testDIV{ height:' + height + 'px !important; }';
writeStyles('styles_js', cssText)
这是我在Angular中行之有效的方法: 在HTML中,我有按钮与编程创建的CSS与特定的ID:
<button [id]="'hoverbutton1'+item.key" [ngClass]="getHoverButtonClass()">
<mat-icon class="icon">open_in_new</mat-icon>
</button>
在typescript中,我创建了CSS,并将其分配给给定ID的特定元素:
addClasses(){
var style1 = document.createElement('style');
style1.innerHTML = '.hoverbutton'+this.item.key+' { display: none; }';
document.getElementsByTagName('head')[0].appendChild(style1);
}
getHoverButtonClass() {
return "hoverbutton"+this.item.key
}
通过这种方式,我可以创建尽可能多的CSS类,并将它们单独分配给元素。:)