How can I retrieve the class of an element using jQuery/javascript?

Question

Hi,

I have a bunch of inputs like this

<input id="someId" type="button" class="SomeClass" onclick="determineClass(this.id, event)" />

From javascript I would like to get the class, it's different for each input.

function determineClass(id, e) {
    var elementClass = //Somehow get the class here
}

It can be using jQuery or just plain javascript... Does anyone know how to do this?

Thanks, Matt

Answer 1

[edit]

Ah crap... not what you meant...

$('#id').attr('class');

[/edit]

Answer 2

alert($('#someId').attr('class'));

If your input has multiple classes, attr('class') returns a space-delimited list of classnames. You can get the last one as follows:

alert($('#someId').attr('class').split(' ').slice(-1));

See Attributes/attr

Answer 3

You would use:

$('#someId').attr('class')

But beware that if it has multiple classes it will return a string of all of them, so you'll have to use indexOf or a regex to check for a specific class in that case.

Answer 4

A bit simpler using plain ol' JavaScript:

function determineClass(id, e)
{
  var elem = document.getElementById(id);

  if(elem)
  {
    alert(elem.className);
  }
}

Answer 5

Using plain ol' javascript, if you already have a variable/reference to the element, you can pull the class out using "element.className"

So, for your element "someId" above:

element = document.getElementById('someId');
if(element) elementClass = element.className

This gets a little more complicated if you have multiple classes assigned to the element -- you'd have to split what you find in the className property by a space in order to separate them -- but that's the basics.

That said, if you've got the chance, use jQuery. It generally makes this kind of thing easier.