Using the CSS "filter" property with jQueries css method

Question

It seems I cannot apply the css "filter" property with the .css method in jQuery. Other properties seem to work okay when they are written this way, but not the filter property... jsFiddle here:

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

Here's what my current code looks like.

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

I'm not seeing the filter property in your code.

Andy Hoffman
– Andy Hoffman

2016-05-05 22:28:48 +00:00
Commented May 5, 2016 at 22:28 — Andy Hoffman
– Andy Hoffman, Commented May 5, 2016 at 22:28
idem, jsfiddle.net/fwcdzhu2/3 but doesnt apply only to bg

G-Cyrillus
– G-Cyrillus

2016-05-05 22:29:21 +00:00
Commented May 5, 2016 at 22:29 — G-Cyrillus
– G-Cyrillus, Commented May 5, 2016 at 22:29

mhodges · Accepted Answer · 2016-05-05 22:29:06Z

1

You need to set the filter attribute if you are trying to set the filter via .css() - Also, you need to include the browser prefixing to make it work in chrome, opera, and safari.

Keep in mind that filter does not have full cross-browser support!

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

Demo: https://jsfiddle.net/fwcdzhu2/2/

answered May 5, 2016 at 22:29

mhodges

11.2k2 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andy Hoffman · Accepted Answer · 2016-05-05 22:53:05Z

1

Webkit announced they are dropping prefixing. Because of this, I would consider cleaning things up a bit. If you need to remove the -webkit-filter at some point, removing it from CSS is way less annoying than doing it from JavaScript.

CSS

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

JS

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

answered May 5, 2016 at 22:53

Andy Hoffman

19.2k5 gold badges50 silver badges68 bronze badges

Comments

Webomatik · Accepted Answer · 2016-05-05 22:29:03Z

0

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

answered May 5, 2016 at 22:29

Webomatik

8367 silver badges7 bronze badges

Collectives™ on Stack Overflow

Using the CSS "filter" property with jQueries css method

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related