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

Question

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

我现在的代码总是会重置内联样式，这样我最后设置的内容就全部存在了。

这是一个示例片段:

$("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>

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

我想要同时应用灰度和模糊。

Answer 1

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

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

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

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

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