jQuery .css() append or overwrite

Question

When appending the .css() function in jQuery 1.4.4 will the .css() override each of the preceding css, or will it append it?

e.g.

$('.GhostIcon').css('opacity', '0.25').css('filter', 'alpha(opacity=25)').css('-khtml-opacity', '0.25').css('-moz-opacity', '0.25');

And secondly, does this have the same behaviour?

$('.GhostIcon').css('opacity', '0.25');
$('.GhostIcon').css('filter', 'alpha(opacity=25)');
$('.GhostIcon').css('-khtml-opacity', '0.25');
$('.GhostIcon').css('-moz-opacity', '0.25');

You can chain your function calls, but there's a better shortcut for css, use an object: $('.GhostIcon').css({'opacity':'0.25', 'filter':'alpha(opacity=25)',...}); — zzzzBov
– zzzzBov, Commented Dec 6, 2010 at 6:14
you may also want to consider adding and removing classes rather than putting css directly on the element, as it will be easier to manage in the future, for example, if you decide that the opacity level needs to change — Toni Leigh
– Toni Leigh, Commented Dec 2, 2013 at 13:43

Matti Virkkunen · Accepted Answer · 2010-12-06 06:11:53Z

12

Setting a CSS property on an element will not remove all the other properties it might already have. So yes, it's cumulative. Of course setting a property that's already set will change the value, since you can't have the same property twice.

Edit: Also, you only need to set opacity. jQuery will take care of setting things for lesser browsers.

answered Dec 6, 2010 at 6:11

Matti Virkkunen

65.4k9 gold badges138 silver badges162 bronze badges

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

1 Comment

Marcus Over a year ago

"Setting a CSS property on an element will not remove all the other properties" - This is not necessarily true, if CSS is set in another framework, such as angular, it will be overwritten.

rahul · Accepted Answer · 2010-12-06 06:15:09Z

2

These styles are applied so that it will work cross browser way. Also you can append the CSS in a single go

$('.GhostIcon').css({'opacity': '0.25', 'filter': 'alpha(opacity=25)', '-khtml-opacity': '0.25', '-moz-opacity': '0.25'});

answered Dec 6, 2010 at 6:15

rahul

188k50 gold badges239 silver badges266 bronze badges

Comments

kobe · Accepted Answer · 2010-12-06 06:15:44Z

1

@JD , if it same value , it will definetly overwrite , if not there it will appened

answered Dec 6, 2010 at 6:15

kobe

15.9k15 gold badges67 silver badges93 bronze badges

Collectives™ on Stack Overflow

jQuery .css() append or overwrite

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related