在 jQuery 中创建 CSS 类答案

【问题标题】：Creating a CSS class in jQuery在 jQuery 中创建 CSS 类
【发布时间】：2011-03-24 12:25:34
【问题描述】：

我相信 jQuery 中的 .addClass() 函数将一个 CSS 类附加到当前选择，但我想知道我可以在 jQuery 中创建或定义一个 CSS 类，然后附加它吗？

【问题讨论】：

“定义一个类”是什么意思？您想通过 JavaScript 创建全局 CSS 规则吗？如果是这样，您为什么要这样做？
没错，我只是出于好奇而想知道。
jquery create css rule / class @ runtime的可能重复
没有“CSS 类”这样的东西。 addClass 方法添加一个 HTML 类。您的意思是“如何创建 CSS 规则集？”

【解决方案1】：

我不确定你想要什么，但我认为你能做的最好的事情是这样的：

var someClass = { "width": "100%", "background": "#ffffff" };
$(this).css(someClass);

请注意，这实际上并不是在创建一个类，但它可能会满足您的需要。

【讨论】：

注意class是JavaScript中的保留字

【解决方案2】：

实际上，您可以创建一条影响当前页面上所有元素的 CSS 规则。在大多数浏览器中，它应该很简单：

var style = $('<style>body { background: green; }</style>')
$('html > head').append(style);

这在 IE 中可能有效，也可能无效，但是您可以使用 IE 的专有 addRule 代替：

document.styleSheets[0].addRule('body', 'background: green', -1);

这自然不会帮助您创建可在网页之间共享的 css 文件，但它是一种无需迭代即可影响大量元素样式的便捷方式。

【讨论】：

【解决方案3】：

这里将创建一个随处可用的 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"
});

【讨论】：

【解决方案4】：

使用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 docs 中还有更多内容。

在内部，它使用MooGoo mentioned as well 的“将样式表附加到头部”技巧。

【讨论】：

需要注意的是，$.rule 插件 v1.0.2 不再适用于 Firefox (2013)。