web-dev-qa-db-ja.com

jQueryでCSSクラスを作成する

JQueryの.addClass（）関数がCSSクラスを現在の選択にアタッチすると思いますが、jQueryでCSSクラスを作成または定義してからアタッチできるのではないかと思っていました。

javascriptjquerycssclass
39
Qcom

実際には、現在のページのすべての要素に影響を与えるCSSルールを作成できます。ほとんどのブラウザでは、次のようにシンプルにする必要があります。

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

これはIEで機能する場合と機能しない場合がありますが、代わりにIE独自の addRule を使用できます。

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

当然、これはWebページ間で共有できるcssファイルの作成には役立ちませんが、繰り返し処理することなく多数の要素のスタイルに影響を与える便利な方法です。

80
MooGoo

私はあなたが何を望んでいるのか正確にはわかりませんが、あなたができる最善のことは次のようなものだと思います：

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

これは実際にはクラスを作成しているわけではありませんが、必要なことを行う可能性があることに注意してください。

14
Stephen Watkins

これは、どこでも利用できる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"
});
9
Tim Down

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も同様 。

2
Andras Vass