在jQuery中创build一个CSS类
我相信jQuery中的.addClass（）函数将CSS类附加到当前的select，但我想知道我可以在jQuery中创build或定义一个CSS类，然后附加它？
实际上，你可以创build一个CSS规则来影响当前页面上的所有元素。 在大多数浏览器中，它应该像下面这样简单：
var style = $('<style>body { background: green; }</style>') $('html > head').append(style); 这可能会或可能不会在IE中工作，但是您可以使用IE专有的addRule ：
document.styleSheets[0].addRule('body', 'background: green', -1);
当然，这不会帮助你创build可以在网页之间共享的css文件，但是它是一种影响大量元素风格的方便方法，而不需要迭代它们。
我不完全确定你想要什么，但我认为你能做的最好的是这样的：
var someClass = { "width": "100%", "background": "#ffffff" }; $(this).css(someClass);
请注意，这不是实际创build一个类，但它可能会做你所需要的。
这里有一些东西会创build一个可以在任何地方都可用的CSS类，并将其应用于一个jQuery对象。 这使用了与MooGoo所提到的相同的基本技术，但充实了一个function完整的代码片段：
(function() { var addRule; if (typeof document.styleSheets != "undefined" && document.styleSheets) { addRule = function(selector, rule) { var styleSheets = document.styleSheets, styleSheet; if (styleSheets && styleSheets.length) { styleSheet = styleSheets[styleSheets.length - 1]; if (styleSheet.addRule) { styleSheet.addRule(selector, rule) } else if (typeof styleSheet.cssText == "string") { styleSheet.cssText = selector + " {" + rule + "}"; } else if (styleSheet.insertRule && styleSheet.cssRules) { styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length); } } } } else { addRule = function(selector, rule, el, doc) { el.appendChild(doc.createTextNode(selector + " {" + rule + "}")); }; } var createCssClass = function(className, cssProps, doc) { doc = doc || document; var head = doc.getElementsByTagName("head")[0]; if (head && addRule) { var selector = "*." + className; var ruleBits = []; for (var i in cssProps) { if (cssProps.hasOwnProperty(i)) { ruleBits.push(i + ":" + cssProps[i] + ";"); } } var rule = ruleBits.join(""); var styleEl = doc.createElement("style"); styleEl.type = "text/css"; styleEl.media = "screen"; head.appendChild(styleEl); addRule(selector, rule, styleEl, doc); styleEl = null; } }; jQuery.fn.createAndApplyCssClass = function(className, cssProps) { createCssClass(className, cssProps, document); this.addClass(className); }; })(); $("#someelement").createAndApplyCssClass("test", { "background-color": "green", "color" : "white" });
使用jQuery.Rule，你可以编写这样的代码来附加一个新的CSS规则：
$.rule('#content ul{ border:1px solid green }').appendTo('style');
扩展规则：
$.rule('#content ul', 'style').append('background:#FF9');
删除整个规则：
$.rule('#content ul', 'style').remove();
API文档中还有更多。
在内部，它使用MooGoo提到的“附加样式表头”技巧。
