jQuery 在过滤器的先前内联样式之上添加内联样式答案

【问题标题】：jQuery add inline style on top of previous inline style for filtersjQuery 在过滤器的先前内联样式之上添加内联样式
【发布时间】：2015-05-08 15:46:32
【问题描述】：

我有一个元素，我想在不同时间添加多个内联过滤器样式。

我现在的代码总是重置内联样式，这样我最后设置的就是所有内容。

这里是一个例子 sn-p:

$("div").css("-webkit-filter","grayscale(1)");
$("div").css("-webkit-filter","blur(5px)");

.box{background:blue; width:100px; height:100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>

你可以看到我先设置了灰度，然后它变成了黑色。然后我设置了第二个模糊，但它会擦除灰度滤镜并将其变回蓝色然后模糊。

我希望同时应用灰度和模糊。

【问题讨论】：

【解决方案1】：

问题是您正在覆盖以前的样式，因为它们都使用相同的属性。尝试将它们放在同一个语句中，如下所示：

$("div").css("-webkit-filter","blur(5px) grayscale(1)");

编辑：如果您需要在不同时间应用它们，试试这个：

$("div").css("-webkit-filter","grayscale(1)");
$("div").css("-webkit-filter","blur(5px) grayscale(1)");

这将首先设置灰度，然后通过重新应用模糊效果来保留它

【讨论】：

如前所述，过滤器将在不同时间应用，因此不能一起使用。
@sjmartin 更新了我的答案，应该是你需要的
不是。您的第二个示例是第一行的精确副本。您仍在同时将它们设置在一起。
是的，因为如果您想同时应用它们，则必须将它们链接在一起，否则您将覆盖之前设置的任何内容。第一行只在你想要的地方设置灰度，然后在添加模糊时通过重新应用来保留该设置。如果您不想对字符串进行硬编码，请保存已在某处应用的效果并在设置下一个过滤器时连接字符串

【解决方案2】：

这将采用当前的 css 并附加新的东西。

var $div = $("div");

$div.css($div.css() + "-webkit-filter","blur(5px)");

【讨论】：

【解决方案3】：

您可能希望在一行中添加两个过滤器，如下所示：

如果您设置相同的属性，Jquery 想要覆盖 css。

这个问题也解决了类似的问题，但似乎不是一个非常干净的解决方案。

【讨论】：