jQuery更改多个CSS，然后再更改回_Jquery

jQuery更改多个CSS，然后再更改回

jquery

jQuery更改多个CSS，然后再更改回,jquery,Jquery,使用jQuery切换几个css属性，然后将它们全部切换回来的首选方法是什么例如，如果我设置： $element.css({ "background" : "white", "height": "50px", "width" : "30px" }); $anotherElement.css({ "overflow" : "hidden", "font-size": "12px", "padding" : "5px" }); $yetAnotherElement.css({ "top" : "10

使用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个不同的选择器，以说明逐个保存每个元素是不方便的，为每个元素创建“临时类”也是不方便的，特别是如果我有

yestanotheranotherelement

等等。。。我们也可以说它们在不同的容器中

如果能够获得css“对象”，那就太好了：

还可以很好地使用阵列：

//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”}

css（“position”，“overflow”，true）将返回

{“position”：“absolute”，“overflow”：“hidden”}

然后它可以像我想要的那样轻松地恢复：

element.css（cssObject）

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

您的班级可以是：

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

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

您的班级可以是：

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

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

例如

然后，您可以从元素中添加和删除类，以打开和关闭它

$element.toggleClass('style1');

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

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

例如

然后，您可以从元素中添加和删除类，以打开和关闭它

$element.toggleClass('style1');

jQuery CSS支持要使用道具数组，我举了一个例子

函数get\u random\u color（）{ 变量字母='0123456789ABCDEF'。拆分（''）； var color='#'；对于（变量i=0；i<6；i++）{ 颜色+=字母[Math.round（Math.random（）*15）]； } 返回颜色； } $（函数（）{ //要保存哪个css var cssList=['background-color'，'color']； //用于保存css var-css； $（“#保存”）。单击（函数（）{ css=$（'div'）.css（cssList）； }); $（“#还原”）。单击（函数（）{ $（'div'）.css（css）； }); $（“#更改”）。单击（函数（）{ $（'div'）.css（'background-color'，get_random_color（））； $（'div'）.css（'color'，get_random_color（））； }); });

jQuery CSS支持要使用道具数组，我举了一个例子

我希望在飞行中真正创造出这样的东西。飞行意味着什么。这就是我所说的“临时类”的意思。对于如此小的2-3个属性更改，拥有大量一次性使用的类似乎会造成很多代码污染。如果我可以动态地（用javascript）创建这样的类，而不需要将它们保存在任何地方，那就太好了。问题是有太多的消失元素和太多的状态，这些类将非常多。代码的所有问题

#test

是一个ID选择器。它应该是

.test

。我想他的意思是他有一些动态css属性，所以他不能使用classI。我想真的在动态中创建这样的东西。动态意味着什么。这就是我所说的“临时类”的意思。对于如此小的2-3个属性更改，拥有大量一次性使用的类似乎会造成很多代码污染。如果我可以动态地（用javascript）创建这样的类，而不需要将它们保存在任何地方，那就太好了。问题是有太多的消失元素和太多的状态，这些类将非常多。代码的所有问题

#test

是一个ID选择器。应该是

.test

。我想他的意思是，他有一些动态css属性，所以他不能使用类。谢谢你的更新。我查看了所有这些解决方案，它们都很难看，因为它们只是将类注入到页面中。我提出的语法非常简洁，可以很好地与数组配合使用。array.push（elements.eq（index.css（））…等，然后迭代和恢复…没有任何类的跟踪，所有这些都是在对象退出作用域时被擦除的对象。我还没准备好相信这样的东西不存在。感谢更新，我浏览了所有这些解决方案，它们都很难看，因为它们只是将类注入页面。我提出的语法非常简洁，可以很好地与数组配合使用。array.push（elements.eq（index.css（））…等，然后迭代和恢复…也没有任何类的痕迹

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