jquery - 将 CSS "filter"属性与 jQuery css 方法一起使用

Question

看来我无法在 jQuery 中将 css“filter”属性与 .css 方法一起应用。以这种方式编写时，其他属性似乎可以正常工作，但过滤器属性却不行……这里的 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 does not have full cross-browser support!

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

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