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)");

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

Answer 2

这将获取当前的css并附加新内容。

let voices:[String:String] = [
  "en": "com.apple.speech.synthesis.voice.Alex",
  "ru": "com.apple.speech.synthesis.voice.milena",
  "ar": "com.apple.speech.synthesis.voice.tarik",
  "hu": "com.apple.speech.synthesis.voice.mariska",
  "nl": "com.apple.speech.synthesis.voice.ellen",
  "el": "com.apple.speech.synthesis.voice.melina",
  "da": "com.apple.speech.synthesis.voice.sara",
  "he": "com.apple.speech.synthesis.voice.carmit",
  "id": "com.apple.speech.synthesis.voice.damayanti",
  "es": "com.apple.speech.synthesis.voice.Jorge",
  "it": "com.apple.speech.synthesis.voice.alice",
  "zh": "com.apple.speech.synthesis.voice.ting-ting",
  "ko": "com.apple.speech.synthesis.voice.yuna",
  "de": "com.apple.speech.synthesis.voice.anna",
  "no": "com.apple.speech.synthesis.voice.nora",
  "pl": "com.apple.speech.synthesis.voice.zosia",
  "pt": "com.apple.speech.synthesis.voice.joana",
  "ro": "com.apple.speech.synthesis.voice.ioana",
  "sk": "com.apple.speech.synthesis.voice.laura",
  "th": "com.apple.speech.synthesis.voice.kanya",
  "tr": "com.apple.speech.synthesis.voice.yelda",
  "fi": "com.apple.speech.synthesis.voice.satu",
  "fr": "com.apple.speech.synthesis.voice.thomas",
  "hi": "com.apple.speech.synthesis.voice.lekha",
  "cs": "com.apple.speech.synthesis.voice.zuzana",
  "sv": "com.apple.speech.synthesis.voice.alva",
  "ja": "com.apple.speech.synthesis.voice.kyoko"
]

Answer 3

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

https://developer.mozilla.org/en/docs/Web/CSS/filter

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

这个问题也解决了类似的问题，虽然看起来不是一个非常干净的解决方案。

Don't overwrite css properties, but add to them with jQuery

jQuery在过滤器

3 个答案: