Question

使用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}}等等......我们也说它们在不同的容器中。

能够获得css“对象”会很高兴：

yetAnotherAnotherElement

也可以很好地使用数组：

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

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

有类似的东西吗？

UPDATE：事实证明我可以在默认情况下设置$ element.css（cssObject），只需要覆盖一个空白的css（）来返回一个基于标志的对象或字符串。例如：

//Set elements.each(function (index, element) { array[index] = $(element).css(); }); //Restore elements.each(function (index, element) { $(element).css(array[index]); });将返回element.css("overflow", true) { "overflow" : "hidden" }会返回element.css("position", "overflow", true)

然后可以像我想的那样轻松恢复：{ "position" : "absolute", "overflow":"hidden" }

Answer 1

我认为最简单的解决方案是将这些元素转换为CSS类。

E.g。

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

然后你可以在元素中添加和删除类来打开和关闭它。

$element.toggleClass('style1');

如果您不希望将这些样式存储在常规样式表中，而是在运行时生成它们。以下答案提供了有关动态添加到页面的类的详细信息。它还应该具有额外的好处，使CSS优先于链接的样式表。

jQuery create CSS rule / class @ runtime

Answer 2

我建议使用.toggleClass并将相关的CSS放入类中：

你的班级可以是：

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

Answer 3

jQuery CSS支持使用prop数组，我已经做了一个例子

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());
    });
});

jQuery更改多个CSS然后更改回来

3 个答案: