CODEWITHSUNDEEP
javascriptjquerycss
user1032531
user1032531

Reputation: 26281

Best way to dynamically add and remove style on elements

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:

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

What is the best way to do so?

Upvotes: 2

Views: 3437

Answers (7)

Joseph Silber
Joseph Silber

Reputation: 219938

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());

Upvotes: 4

prageeth
prageeth

Reputation: 7395

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

Upvotes: 0

sunleo
sunleo

Reputation: 10943

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

Upvotes: 0

Ian Roberts
Ian Roberts

Reputation: 122364

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.

Upvotes: 1

Reflective
Reflective

Reputation: 3917

.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.

Upvotes: 0

Bogdan
Bogdan

Reputation: 44526

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.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

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.

Upvotes: 0

Related Questions