1

jQueryを使用していくつかのcssプロパティを切り替えてから、それらをすべて元に戻す好ましい方法は何ですか?

たとえば、次のように設定した場合:

$element.css({ "background" : "white", "height": "50px", "width" : "30px" });
$anotherElement.css({ "overflow" : "hidden", "font-size": "12px", "padding" : "5px" });
$yetAnotherElement.css({ "top" : "10px", "font-weight": "bold" });

この特定の数の要素を使用して、それぞれに 2 ～ 3 個の異なるセレクターを使用して、それぞれを 1 つずつ保存するのは不便であり、特に私が持ってyetAnotherAnotherElementいる場合などにそれぞれに「一時的なクラス」を作成するのも便利ではないことを示しました.. . また、それらが異なるコンテナーにあるとしましょう。

css の「オブジェクト」を取得できると便利です。

var oldCSS= $element.css(); 
$element.css({ ...change css... });

//Change back
$element.css(oldCSS);

配列でもうまく動作するはずです:

//Set
elements.each(function (index, element) { 
     array[index] = $(element).css();
});

//Restore
elements.each(function (index, element) { 
     $(element).css(array[index]);
});

このようなものはありますか？

更新: $element.css(cssObject) をデフォルトで設定できることがわかりました。これは、空白の css() をオーバーライドして、フラグに基づいてオブジェクトまたは文字列を返すだけの問題です。例えば：

element.css("overflow", true)戻り{ "overflow" : "hidden" } element.css("position", "overflow", true)ます 戻ります{ "position" : "absolute", "overflow":"hidden" }

その後、必要に応じて簡単に復元できます。element.css(cssObject)

4

3 に答える 3

2

最も簡単な解決策は、これらの要素を CSS クラスに変換することだと思います。

例えば

.style1 {
    "background" : "white", "height": "50px", "width" : "30px"
}

次に、要素にクラスを追加および削除して、オンとオフを切り替えることができます。

$element.toggleClass('style1');

これらのスタイルを通常のスタイル シートに保存せず、代わりに実行時に生成する場合。次の回答は、ページに動的に追加されたクラスの詳細を提供します。また、リンクされたスタイル シートよりも CSS を優先するという利点もあります。

jQueryはCSSルール/クラス@ランタイムを作成します

于 2013-04-12T05:23:18.057 に答える
1

.toggleClass を使用し、関連する CSS をクラスに入れることをお勧めします。

あなたのクラスは次のようになります:

.test {
    background : "white", "height": "50px", "width" : "30px";
}
于 2013-04-12T05:22:46.673 に答える
1

プロップの配列を使用するためのjQuery CSSサポート、私は例を作りました

http://jsfiddle.net/steelywing/utGVz/

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

$(function () {
    // Which css want to save
    var cssList = ['background-color', 'color'];

    // Use to save css
    var css;

    $('#save').click(function () {
        css = $('div').css(cssList);
    });

    $('#restore').click(function () {
        $('div').css(css);
    });

    $('#change').click(function () {
        $('div').css('background-color', get_random_color());
        $('div').css('color', get_random_color());
    });
});
于 2013-04-12T06:14:04.867 に答える