Question

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

Answer 1

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.