将 CSS "filter" 属性与 jQueries css 方法结合使用

Question

我似乎无法将css"filter"属性与jQuery中的.css方法一起应用。其他属性在以这种方式编写时似乎可以正常工作，但filter属性却不行。。。jsFiddle在这里：

https://jsfiddle.net/md2100/fwcdzhu2/

以下是我当前的代码。

HTML:

<h2>This is a heading</h2>
<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>
<p>This is a paragraph.</p>
<button>Set background-color of p</button>

Javascript：

$(document).ready(function(){
$("button").click(function(){
$("p").css("filter", "invert(100%)");
});
});

Answer 1

如果您试图通过.css（）设置过滤器，则需要设置filter属性-此外，还需要包含浏览器前缀，使其在chrome、opera和safari中工作。

请记住，filter没有完全的跨浏览器支持！

$("p").css({"-webkit-filter": "invert(100%)", "filter": "invert(100%)"});

演示：https://jsfiddle.net/fwcdzhu2/2/

Answer 2

Webkit宣布他们将删除前缀。正因为如此，我才会考虑稍微清理一下。如果您需要在某个时刻删除-webkit-filter，那么从CSS中删除它远比从JavaScript中删除它不那么烦人。

CSS

.my-filter {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

JS

$("p").addClass("my-filter");

Answer 3

$("p").css("filter", "invert(100%)");