How can I change the class of a button with javascript?

Question

I have this code:

var image = button.getElementsByTagName("span")[0];
if (isEnabled) {
    image.style.color = "#BBB"
else {
    image.style.color = "#AAA"

Can someone give me some advice on how instead of directly setting a color that I could set the button to have a 3rd class of enabled and then later set it to have a 3rd class of disabled?

Note that my button currently has classes like this:

class="fa fa-bold"
class="fa fa-arrow"

etc.

So I would need the first two classes to be unchanged. Then I need to be able to set to like this:

class="fa fa-bold enabled"
class="fa fa-bold disabled"
class="fa fa-bold enabled"

etc.

Tushar · Accepted Answer · 2015-07-05T06:22:50.033

4

Use classList

To add new class myClass to image, use add():

Adds a class to an element's list of classes. If class already exists in the element's list of classes, it will not add the class again.

image.classList.add('myClass')

To remove class, use remove()

Removes a class from an element's list of classes in a safe manner. Errors are not thrown If the class does not exist.

image.classList.remove('myClass')

To toggle class, use toggle()

If the name exists within the element's classList, it will be removed. If name does not exist, it will be added.

image.classList.toggle('myClass') // If exists, remove, if not add

To check if element has class, use contains()

Checks if an element's list of classes contains a specific class .

if (image.classList.contains('myClass')) {
    alert('HasClass myClass');
} else {
    alert('Dont have class');
}

CSS

.myClass {
    color: #bbb;
}

edited Jul 05 '15 at 06:22

answered Jul 05 '15 at 06:14

Tushar

85,780
21
159
179

1

Note: `.classList` requires IE10 or greater. – jfriend00 Jul 05 '15 at 06:17
In my case I am not sure which classes the button has so should I first remove both enabled and disabled and then just add the one? Can you give an example like this for my particular code? thanks – Samantha J T Star Jul 05 '15 at 06:17
.ie10 or greater is okay for my needs :-) – Samantha J T Star Jul 05 '15 at 06:18
If you are not sure you can remove all classes you don't and add those you need. – Alexander Jul 05 '15 at 06:19
@jfriend00 The `MDN` doc also provide polyfills for browsers that don't support these properties – Tushar Jul 05 '15 at 06:25
Yeah, that's a pretty big polyfill. Not sure I'd want to lug that around in my code. – jfriend00 Jul 05 '15 at 06:33

jfriend00 · Answer 2 · 2015-07-05T06:35:41.440

1

If you aren't using a library like jQuery that has className functionality built in and you want browser support from older browsers, then you can use your own little functions to add or remove a class name from a DOM object without disturbing the other class names like this:

function addClass(elem, cls) {
    if (!hasClass(elem, cls)) {
        var oldCls = elem.className;
        if (oldCls) {
            oldCls += " ";
        }
        elem.className = oldCls + cls;
    }
}

function removeClass(elem, cls) {
    var str = " " + elem.className + " ";
    elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
}

function hasClass(elem, cls) {
    var str = " " + elem.className + " ";
    var testCls = " " + cls + " ";
    return(str.indexOf(testCls) !== -1) ;
}

removeClass(image, "enabled");
addClass(image, "disabled");

edited Jul 05 '15 at 06:35

answered Jul 05 '15 at 06:18

jfriend00

683,504
96
985
979

I'd add an internal check in the `addFunction` wether the class exists. Otherwise something like `myClass myClass` is possible. – Alexander Jul 05 '15 at 06:21
1

@AMartinNo1 - I updated with a little more capable version that checks if the cls already exists. I was trying to keep the answer as simple as possible (not drag in too much other code), but I see your point. – jfriend00 Jul 05 '15 at 06:36

How can I change the class of a button with javascript?

2 Answers2