如何在JavaScript中dynamic创buildCSS类并应用？
我需要在JavaScript中dynamic创build一个CSS样式表类，并将其分配给一些HTML元素，如div，table，span，tr等，以及asp：Textbox，Dropdownlist和datalist等控件。
可能吗？
样品会很好。
虽然我不确定为什么要用JavaScript创buildCSS类，但下面是一个选项：
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'; find了一个更好的解决scheme， 适用于所有浏览器。
使用document.styleSheet添加或replace规则。 接受的答案是简短而方便，但这个工程跨越IE8和更less。
function createCSSSelector (selector, style) { if (!document.styleSheets) return; if (document.getElementsByTagName('head').length == 0) return; var styleSheet,mediaType; if (document.styleSheets.length > 0) { for (var i = 0, l = document.styleSheets.length; i < l; i++) { if (document.styleSheets[i].disabled) continue; var media = document.styleSheets[i].media; mediaType = typeof media; if (mediaType === 'string') { if (media === '' || (media.indexOf('screen') !== -1)) { styleSheet = document.styleSheets[i]; } } else if (mediaType=='object') { if (media.mediaText === '' || (media.mediaText.indexOf('screen') !== -1)) { styleSheet = document.styleSheets[i]; } } if (typeof styleSheet !== 'undefined') break; } } if (typeof styleSheet === 'undefined') { var styleSheetElement = document.createElement('style'); styleSheetElement.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(styleSheetElement); for (i = 0; i < document.styleSheets.length; i++) { if (document.styleSheets[i].disabled) { continue; } styleSheet = document.styleSheets[i]; } mediaType = typeof styleSheet.media; } if (mediaType === 'string') { for (var i = 0, l = styleSheet.rules.length; i < l; i++) { if(styleSheet.rules[i].selectorText && styleSheet.rules[i].selectorText.toLowerCase()==selector.toLowerCase()) { styleSheet.rules[i].style.cssText = style; return; } } styleSheet.addRule(selector,style); } else if (mediaType === 'object') { var styleSheetLength = (styleSheet.cssRules) ? styleSheet.cssRules.length : 0; for (var i = 0; i < styleSheetLength; i++) { if (styleSheet.cssRules[i].selectorText && styleSheet.cssRules[i].selectorText.toLowerCase() == selector.toLowerCase()) { styleSheet.cssRules[i].style.cssText = style; return; } } styleSheet.insertRule(selector + '{' + style + '}', styleSheetLength); } }
function使用如下。
createCSSSelector('.mycssclass', 'display:none');
请注意，即使函数名称是createClass，它实际上也会创build一个select器。 所以不要忘了在你的课程名称前添加（句号）。 不需要提及，你也可以用这个函数创build其他的select器。
在这里findhttp://www.happycode.info/create-css-classes-with-javascript/
简单的答案是，这是兼容的“在所有的浏览器”（具体来说，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; } }
这里还有一个testing页面： https ： //gist.github.com/shadybones/9816763
关键点在于样式元素有一个“styleSheet”/“sheet”属性，您可以使用它来添加/删除规则。
有一个轻量级的jQuery插件允许生成CSS声明： jQuery-injectCSS
实际上，它使用JSS （由JSON描述的CSS），但是为了生成dynamic的CSS样式表，它很容易处理。
$.injectCSS({ "#test": { height: 123 } });
YUI是迄今为止我所见过的最好的样式表实用程序 。 我鼓励你看看，但这里有一个口味：
// style element or locally sourced link element var sheet = YAHOO.util.StyleSheet(YAHOO.util.Selector.query('style',null,true)); sheet = YAHOO.util.StyleSheet(YAHOO.util.Dom.get('local')); // OR the id of a style element or locally sourced link element sheet = YAHOO.util.StyleSheet('local'); // OR string of css text var css = ".moduleX .alert { background: #fcc; font-weight: bold; } " + ".moduleX .warn { background: #eec; } " + ".hide_messages .moduleX .alert, " + ".hide_messages .moduleX .warn { display: none; }"; sheet = new YAHOO.util.StyleSheet(css);
显然还有其他更简单的方式来改变风格，如在这里build议的风格。 如果他们对你的问题有意义，他们可能是最好的，但是为什么修改CSS是一个更好的解决scheme肯定是有原因的。 最明显的情况是当你需要修改大量的元素时。 另一个主要的情况是，如果你需要你的风格变化涉及级联。 使用dom来修改元素将始终具有更高的优先级。 它的大锤的方法，相当于直接在html元素上使用style属性。 这并不总是预期的效果。
截至IE 9.你现在可以加载一个文本文件，并设置一个style.innerHTML属性。 所以基本上你现在可以通过ajax加载一个css文件（并获得callback），然后设置像这样的样式标签内的文本。
这在其他浏览器工作，不知道多远回来。 但只要你不需要支持IE8，那么它将工作。
// RESULT: doesn't work in IE8 and below. Works in IE9 and other browsers. $(document).ready(function() { // we want to load the css as a text file and append it with a style. $.ajax({ url:'myCss.css', success: function(result) { var s = document.createElement('style'); s.setAttribute('type', 'text/css'); s.innerHTML = result; document.getElementsByTagName("head")[0].appendChild(s); }, fail: function() { alert('fail'); } }) });
然后你可以得到一个像myCss.css这样的外部文件
.myClass { background:#F00; }
这里是维什瓦纳特的解决scheme略有改动的评论：
function setStyle(cssRules, aSelector, aStyle){ for(var i = 0; i < cssRules.length; i++) { if(cssRules[i].selectorText && cssRules[i].selectorText.toLowerCase() == aSelector.toLowerCase()) { cssRules[i].style.cssText = aStyle; return true; } } return false; } function createCSSSelector(selector, style) { var doc = document; var allSS = doc.styleSheets; if(!allSS) return; var headElts = doc.getElementsByTagName("head"); if(!headElts.length) return; var styleSheet, media, iSS = allSS.length; // scope is global in a function /* 1. search for media == "screen" */ while(iSS){ --iSS; if(allSS[iSS].disabled) continue; /* dont take into account the disabled stylesheets */ media = allSS[iSS].media; if(typeof media == "object") media = media.mediaText; if(media == "" || media=='all' || media.indexOf("screen") != -1){ styleSheet = allSS[iSS]; iSS = -1; // indication that media=="screen" was found (if not, then iSS==0) break; } } /* 2. if not found, create one */ if(iSS != -1) { var styleSheetElement = doc.createElement("style"); styleSheetElement.type = "text/css"; headElts[0].appendChild(styleSheetElement); styleSheet = doc.styleSheets[allSS.length]; /* take the new stylesheet to add the selector and the style */ } /* 3. add the selector and style */ switch (typeof styleSheet.media) { case "string": if(!setStyle(styleSheet.rules, selector, style)); styleSheet.addRule(selector, style); break; case "object": if(!setStyle(styleSheet.cssRules, selector, style)); styleSheet.insertRule(selector + "{" + style + "}", styleSheet.cssRules.length); break; }
以下内容可能是有趣的。 不完全确定现代浏览器采用它，但它应该做你需要做的事情：
https://jsfiddle.net/xk6Ut/256/
在JavaScript中dynamic创build和更新CSS类的一个选项：
- 使用样式元素创build一个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)
通过回答看，最明显的和直截了当的是缺less的：使用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>
JSS是一个可以帮助你完成任务的有趣项目。
JSS是比CSS更好的抽象。 它使用JavaScript作为一种语言来以一种声明性和可维护的方式来描述样式。 它是在浏览器和服务器端在运行时工作的CSS编译器的高性能JS。
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()
function createCSSClass(selector, style, hoverstyle) { if (!document.styleSheets) { return; } if (document.getElementsByTagName("head").length == 0) { return; } var stylesheet; var mediaType; if (document.styleSheets.length > 0) { for (i = 0; i < document.styleSheets.length; i++) { if (document.styleSheets[i].disabled) { continue; } var media = document.styleSheets[i].media; mediaType = typeof media; if (mediaType == "string") { if (media == "" || (media.indexOf("screen") != -1)) { styleSheet = document.styleSheets[i]; } } else if (mediaType == "object") { if (media.mediaText == "" || (media.mediaText.indexOf("screen") != -1)) { styleSheet = document.styleSheets[i]; } } if (typeof styleSheet != "undefined") { break; } } } if (typeof styleSheet == "undefined") { var styleSheetElement = document.createElement("style"); styleSheetElement.type = "text/css"; document.getElementsByTagName("head")[0].appendChild(styleSheetElement); for (i = 0; i < document.styleSheets.length; i++) { if (document.styleSheets[i].disabled) { continue; } styleSheet = document.styleSheets[i]; } var media = styleSheet.media; mediaType = typeof media; } if (mediaType == "string") { for (i = 0; i < styleSheet.rules.length; i++) { if (styleSheet.rules[i].selectorText.toLowerCase() == selector.toLowerCase()) { styleSheet.rules[i].style.cssText = style; return; } } styleSheet.addRule(selector, style); } else if (mediaType == "object") { for (i = 0; i < styleSheet.cssRules.length; i++) { if (styleSheet.cssRules[i].selectorText.toLowerCase() == selector.toLowerCase()) { styleSheet.cssRules[i].style.cssText = style; return; } } if (hoverstyle != null) { styleSheet.insertRule(selector + "{" + style + "}", 0); styleSheet.insertRule(selector + ":hover{" + hoverstyle + "}", 1); } else { styleSheet.insertRule(selector + "{" + style + "}", 0); } } } createCSSClass(".modalPopup .header", " background-color: " + lightest + ";" + "height: 10%;" + "color: White;" + "line-height: 30px;" + "text-align: center;" + " width: 100%;" + "font-weight: bold; ", null);
使用googleclosures：
你可以使用ccsom模块：
goog.require('goog.cssom'); var css_node = goog.cssom.addCssText('.cssClass { color: #F00; }');
将css节点放入文档头时，javascript代码尝试跨浏览器。
为了search者的利益; 如果您正在使用jQuery，则可以执行以下操作：
var currentOverride = $('#customoverridestyles'); if (currentOverride) { currentOverride.remove(); } $('body').append("<style id=\"customoverridestyles\">body{background-color:pink;}</style>");
显然你可以改变内部的CSS为任何你想要的。
欣赏一些人喜欢纯粹的JavaScript，但它的工作原理和dynamic写入/覆盖样式非常强大。
