Best way to dynamically add and remove style on elements

Question

I am using mouseenter and mouseleave events on some elements to change their appearance. I am able to do so using either of the following two strategies:

$(this).css('someProperty','someValue') to add and then $(this).removeAttr('style') to remove
$(this).addClass('someClass') to add and then $(this).removeClass('someClass') to remove

What is the best way to do so?

Joseph Silber · Accepted Answer · 2017-10-16T20:03:48.663

4

Definitely option 2. Styles should be defined in the stylesheet.

There's also toggleClass, which removes the class if it's there, but adds it if it's missing.

Note: toggleClass also lets you pass in a Boolean as the second argument, telling it whether to add or remove it (regardless of whether it currently has that class applied), so:

$(this).toggleClass('active', true);

is exactly equivalent to:

$(this).addClass('active');

This is very handy when you have a Boolean in your code already. So instead of this:

if (isUserActive()) {
    $(this).addClass('active');
} else {
    $(this).addClass('active');
}

You could just do this:

$(this).toggleClass('active', isUserActive());

edited Oct 16 '17 at 20:03

answered Oct 28 '12 at 18:00

Joseph Silber

214,931
59
362
292

I thought so, but wasn't sure. – user1032531 Oct 28 '12 at 18:00
agree about removeAttr, but http://stackoverflow.com/questions/4036857/jquery-remove-style-added-with-css-function liked it – user1032531 Oct 28 '12 at 18:02
With mouseenter/mouseleave (or hover), is toggleClass() appropriate? – user1032531 Oct 28 '12 at 18:05
@user1032531 - If you're only using `mouseenter` / `mouseleave`, you should rather use the `:hover` pseudo-class in your stylesheet. – Joseph Silber Oct 28 '12 at 18:09

score 1 · Answer 2 · answered Oct 28 '12 at 18:01

1

Option 2 if you must do it in JavaScript, but for modern browsers you may be able to achieve what you're after entirely in CSS using :hover pseudo-classes.

answered Oct 28 '12 at 18:01

Ian Roberts

120,891
16
170
183

score 0 · Answer 3 · answered Oct 28 '12 at 18:00

I'd strongly recommend addClass()/removeClass(), since you can add, remove and change a whole swathe of properties with minimal jQuery.

Whereas the css() method requires you, or rather the script, to keep track of what should be changed to reflect the aesthetic change(s) to convey programmatic interaction, coupling that with the attr() method and removing the style attribute will remove all styles, even those you want the element to retain, which requires you to reassign those properties.

So, basically, option 2 is efficient, and option 1 creates unnecessary work.

There is, of course, always toggleClass(), which can promote further efficiency.

score 0 · Answer 4 · answered Oct 28 '12 at 18:00

0

Unless you need to dynamically generate any of the CSS property values you're better of separating the styles from the javascript. So use classes instead of direct css styles.

answered Oct 28 '12 at 18:00

Bogdan

43,166
12
128
129

score 0 · Answer 5 · answered Oct 28 '12 at 18:01

0

.addClass and .removeClass is the best way because you can style you changes with your CSS ...so after a while you can easily redesign your site.

answered Oct 28 '12 at 18:01

Reflective

3,854
1
13
25

score 0 · Answer 6 · answered Oct 28 '12 at 18:02

Second one is best because normally style will is common for different elements, it will generic and adding removing is good compared with adding attribute one by one.

$(this).addClass('someClass') to add and then $(this).removeClass('someClass') to remove

score 0 · Answer 7 · answered Oct 28 '12 at 18:06

0

If you are calling this function in more than one element I suggest you to use the second one. If you needed to change the appearance again later, then you have to edit only within the css class, not in all elements

answered Oct 28 '12 at 18:06

prageeth

7,159
7
44
72

Best way to dynamically add and remove style on elements

7 Answers7