Javascript 在 jQuery 中创建 CSS 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3393162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a CSS class in jQuery
提问by Qcom
I believe the .addClass() function in jQuery attaches a CSS class to the current selection, but I was wondering I could create or define a CSS class in jQuery, and then attach it?
我相信 jQuery 中的 .addClass() 函数将一个 CSS 类附加到当前选择，但我想知道我可以在 jQuery 中创建或定义一个 CSS 类，然后附加它？
回答by MooGoo
Actually, you can create a CSS rule that will affect all elements on the current page. In most browsers it should be as simple as:
实际上，您可以创建一个 CSS 规则来影响当前页面上的所有元素。在大多数浏览器中，它应该很简单：
var style = $('<style>body { background: green; }</style>')
$('html > head').append(style);
This may or may not work in IE, however you can use IE's proprietary addRuleinstead:
这在 IE 中可能有效，也可能无效，但是您可以改用 IE 的专有addRule：
document.styleSheets[0].addRule('body', 'background: green', -1);
Naturally this will not assist you in creating css files that can be shared between webpages, but it is a handy way of affecting the style of a large number of elements without the need to iterate over them.
自然，这不会帮助您创建可以在网页之间共享的 css 文件，但它是一种影响大量元素样式的便捷方式，而无需对其进行迭代。
回答by Stephen Watkins
I'm not exactly sure what you want, but I think the best you can do is something like this:
我不确定你想要什么，但我认为你能做的最好的事情是这样的：
var someClass = { "width": "100%", "background": "#ffffff" };
$(this).css(someClass);
Note that this is not actually creating a class, but it might do what you need.
请注意，这实际上并不是在创建类，但它可能会满足您的需求。
回答by Tim Down
Here's something that will create a CSS class that will be available everywhere and apply it to a jQuery object. This uses the same basic technique as mentioned by MooGoo but is fleshed out into a fully functional piece of code:
这里有一些东西可以创建一个随处可用的 CSS 类，并将其应用于 jQuery 对象。这使用了与 MooGoo 提到的相同的基本技术，但被充实为一段功能齐全的代码：
(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"
});
回答by Andras Vass
With jQuery.Ruleyou can write code like this to append a new CSS rule:
使用jQuery.Rule你可以编写这样的代码来附加一个新的 CSS 规则：
$.rule('#content ul{ border:1px solid green }').appendTo('style');
Extending a rule:
扩展规则：
$.rule('#content ul', 'style').append('background:#FF9');
Removing the whole rule:
删除整个规则：
$.rule('#content ul', 'style').remove();
There is more in the API docs.
API 文档中有更多内容。
Internally, it uses the "append stylesheet to head" trick that MooGoo mentioned as well.
在内部，它使用MooGoo 也提到的“将样式表附加到头部”技巧。
