CODEWITHSUNDEEP
javascriptjqueryhtmldom
tao4yu
tao4yu

Reputation: 336

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

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")

Upvotes: 1

Views: 6712

Answers (4)

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19059

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.

Upvotes: 1

laaposto
laaposto

Reputation: 12213

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

Upvotes: 0

Pim Verlangen
Pim Verlangen

Reputation: 387

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>

Upvotes: 0

Joseph
Joseph

Reputation: 119877

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

Upvotes: 0

Related Questions