Javascript DOM: How can I get the class attribute value of an element in this situation?

Question

As follows, there is an input element on a web page.

 <input type = "text" class="text-input">

When I click it, the Javascript code will append another class attribute value W_input_focussuch as:

<input type = "text" class="text-input W_input_focus">

Well, how can I get the class attribute value except the value appended by the Javascript when I click on the input? I use getAttribute('class') method to retrieve ,but it return all the values include the js appended.

It is an example, actually beforehand I do not know which value is set to class attribute in the html code and which value is appended by js. And How can I distinguish , Thanks!

I have found a simple answer:

$(input).trigger("blur").attr("class")

How should the Output look like? What have you tried until now? — winner_joiner
– winner_joiner, Commented Mar 19, 2014 at 8:23
Yes, only retrieve "text-input".It is an example, and I do not know the Js will append how many class attribute values. — tao4yu
– tao4yu, Commented Mar 19, 2014 at 8:25
I use getAttribute('class') method to retrieve ,but it return all the values include the js appended. — tao4yu
– tao4yu, Commented Mar 19, 2014 at 8:27
At what point do you need to retrieve the class? Are you writing another click event to get the class value? — Kyo
– Kyo, Commented Mar 19, 2014 at 8:28

Samuli Hakoniemi · Accepted Answer · 2014-03-19 09:46:18Z

There's a classList API available for this kind of cases: https://developer.mozilla.org/en-US/docs/Web/API/Element.classList . Check the link for examples.

It's well supported on browsers except IE (10+): http://caniuse.com/#feat=classlist

..but there's a polyfill for that: https://github.com/eligrey/classList.js

To extend this answer:

What you apparently need is Mutation Events / Observers (https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events). And especially DOMAttrModified, which will dispatch when your className is changed (i.e classes are added/removed).

Support is good except on IE(11+) and on Android browsers (4.4+): http://caniuse.com/#feat=mutationobserver

...but fortunately on IE, you can use onpropertychange listener: http://msdn.microsoft.com/en-us/library/ie/ms536956(v=vs.85).aspx.

An Example (tested on Chrome, FF, IE10): http://codepen.io/zvona/pen/eGbur/ --> check console for details.

Joseph · Accepted Answer · 2014-03-19 08:21:19Z

0

element.className should provide the class names in string format. You can use String.split(' ') to separate them by spaces (since classes are separated by spaces).

answered Mar 19, 2014 at 8:21

Joseph

120k31 gold badges186 silver badges238 bronze badges

1 Comment

tao4yu Over a year ago

It is an example, actually beforehand I do not know which value is set to class attribute in the html code and which value is appended by js.

Pim Verlangen · Accepted Answer · 2014-03-19 08:29:11Z

0

JavaScript (no jQuery):

function getClassNames() {
    var element = document.getElementById('spanId');
    var classNames = element.className; //String containing all the classes as they are given in the attribute
    var classes = classNames.split(' '); //Since classes have to be separated by a whitespace, this will return all 'single' classes
}

HTML:

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="classNames.js"></script>
    </head>
    <body> 
        <input type="button" onclick="getClassNames()" value="Get Classnames">
        <span id="spanId" class="class1 class2"></span>
    </body>
</html>

answered Mar 19, 2014 at 8:29

Pim Verlangen

3871 silver badge11 bronze badges

Comments

laaposto · Accepted Answer · 2014-03-19 08:34:11Z

Every class you add from js it appends after the class name you already have. So you can get the classname, split it in " " and get the first element, which is the class name you had in the start.

Try

HTML:

<input type = "text" class="text-input">

JS:

//ADD SOME CLASSES
$( "input" ).addClass( "W_input_focus" );
$( "input" ).addClass( "class2" );
$( "input" ).addClass( "class3" );

//GET THE CLASS YOU WANT
$( "input" ).click(function() {

    var className = $('input').attr('class');
    var arr = className.split(' ');
    alert(arr[0]);

});

DEMO

With just JS you can try

HTML:

<input id="input" type = "text" class="text-input W_input_focus" onclick="getClass()">

JS:

function getClass(){
  var className = document.getElementById('input').getAttribute('class');
  var arr = className.split(' ');
  alert(arr[0]);
}

DEMO2

Collectives™ on Stack Overflow

Javascript DOM: How can I get the class attribute value of an element in this situation?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related