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 个不同的选择器，以说明逐个保存不方便，并且为每个创建“临时类”也不方便，特别是如果我有的话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 规则/类@runtime

于 2013-04-12T05:23:18.057 回答
1

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());
    });
});
于 2013-04-12T06:14:04.867 回答
1

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

你的班级可以是：

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