Is there a preferred approach to setting an item's class using jQuery

Before j开发者_运维百科Query I would have used something like the following code to set a class on an element:

document.getElementById("MyElementID").className = 'MyClassName';

This has the intended behaviour of replacing anything that was there before my new class name MyClassName

In jQuery the equivalent seems to be:

$('#MyElementID').attr('class', 'MyClassName')

But, we also have the in-built class functions, addClass(), removeClass() and toggleClass(). So to achieve the same effect, I would say:

 $('#MyElementID').removeClass().addClass('MyClassName');

Obviously, the first jQuery example is more concise and requires just one function call (to attr, instead of addClass() and removeClass())

Can we also work on the assumption that I can't use prop as its an earlier (and currently unchangeable) version that I'm working with.

So what would you say is the preferred approach? Does the second sample give me anything over and above the first?

Many thanks in advance.

The addClass(), removeClass() and has() methods of jQuery use the className property of the element. The big advantage they offer is that they allow you to add or remove a class without affecting the other class names set.

The attr() method uses something like this:

document.getElementById("MyElementID")[name] = value;

For cases that you only need one class name, the attribute method will be probably faster. I personally however find the addClass method more elegant and easier to adapt if you need to add more class names in the future.

I think you should check the performance of all these functions. personally i think prop method is fastest ( introduced in v1.6)

see here the performance jQuery().attr vs jQuery().data vs jQuery().prop

http://jsperf.com/jquery-data-vs-jqueryselection-data/8

The difference is in this guy:

<div class="a_class another_class a_third_class">

attr('class','no_other_classes_now') <-- will replace everything in the class attribute even if there are multiple space separated classes. It's probably the lightest-weight of JQ methods for doing this since it's just using DOM methods that already worked properly across browsers for over a decade now.

.removeClass('a_third_class') will remove a class, leaving other classes intact.

.addClass('a_fourth_class') will add a space-separated class without replacing other classes.

^^ These two would have to do more work for a simple class overwrite than attr since they need to do find/replace type operations.

Prop is for changing properties of DOM elements that don't have HTML representatives like the window object (not likely to be useful very often due to other convenience methods) or that would be confusing because different attribute strings can mean different things. Like simply having the attribute "checked" without an equal sign or value being equivalent to checked="checked" or checked="true" as far as the boolean (true/false only) JS property is concerned in certain flavors of HTML. With prop you'll get the javascript property and not necessarily whatever is considered to be between the quotes of the actual HTML element.

When you're not in that type of situation, I would stick with the attr method. The whole point of prop seems to be to take work from the old attr method so I'd be surprised if it was faster in most cases. More importantly it's common and easy to read.