Using JavaScript to append a class, rather than replacing it

Question

Using JavaScript to append a class, rather than replacing it

I am looking for a way to add a class to an element without replacing the existing classes already assigned to it.

Below is the current javascript code that I have:

function black(body) {
var item = document.getElementById(body);
    if (item) {
        item.className=(item.className=='normal')?'black':'normal';
    }
}

This piece of javascript code replaces any existing classes with 'black'. If the class is already 'black', it is changed to 'normal'.

I would like to find a way to combine this script with the following script, which simply adds a class instead of replacing all existing classes:

var item = document.getElementById("body");
item.className = item.className + " additionalclass";

javascript css class

Answer 1

Answer №1

Check out these basic plain javascript functions designed for altering class names in pure javascript. These functions are crafted to specifically match entire class names and eliminate any extra spaces before or after the classnames:

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

function addClass(elem, cls) {
    elem.className += (" " + cls);
}

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

function toggleClass(elem, cls) {
    if (hasClass(elem, cls)) {
        removeClass(elem, cls);
    } else {
        addClass(elem, cls);
    }
}

function toggleBetweenClasses(elem, cls1, cls2) {
    if (hasClass(elem, cls1)) {
        removeClass(elem, cls1);
        addClass(elem, cls2);
    } else if (hasClass(elem, cls2)) {
        removeClass(elem, cls2);
        addClass(elem, cls1);
    }
}

If you desire to switch between the black and normal classes without impacting any other classes on the specified object, you can accomplish it like this:

function black(id) {
    var obj = document.getElementById(id);
    if (obj) {
        toggleBetweenClasses(obj, "black", "normal");
    }
}

Check out a working example here: http://jsfiddle.net/jfriend00/eR85c/

If you wish to add the "black" class only if "normal" is not already present, you can do so with this function:

function black(id) {
    var obj = document.getElementById(id);
    if (obj && !hasClass(obj, "normal")) {
        addClass(obj, "black");
    }
}

Answer 2

Check out these basic plain javascript functions designed for altering class names in pure javascript. These functions are crafted to specifically match entire class names and eliminate any extra spaces before or after the classnames:

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

function addClass(elem, cls) {
    elem.className += (" " + cls);
}

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

function toggleClass(elem, cls) {
    if (hasClass(elem, cls)) {
        removeClass(elem, cls);
    } else {
        addClass(elem, cls);
    }
}

function toggleBetweenClasses(elem, cls1, cls2) {
    if (hasClass(elem, cls1)) {
        removeClass(elem, cls1);
        addClass(elem, cls2);
    } else if (hasClass(elem, cls2)) {
        removeClass(elem, cls2);
        addClass(elem, cls1);
    }
}

If you desire to switch between the black and normal classes without impacting any other classes on the specified object, you can accomplish it like this:

function black(id) {
    var obj = document.getElementById(id);
    if (obj) {
        toggleBetweenClasses(obj, "black", "normal");
    }
}

Check out a working example here: http://jsfiddle.net/jfriend00/eR85c/

If you wish to add the "black" class only if "normal" is not already present, you can do so with this function:

function black(id) {
    var obj = document.getElementById(id);
    if (obj && !hasClass(obj, "normal")) {
        addClass(obj, "black");
    }
}

Answer 3

Answer №2

If you don't anticipate needing to add, remove, or toggle classes frequently, a simpler approach like the code below may be more suitable than creating multiple functions as suggested in jfriend00's answer.

Here is an alternative method for those who prefer not to clutter their code with numerous functions that won't be used often:

function toggle(id) {
    var obj = document.getElementById(id), str, len;

    if (obj) {
        str = " " + obj.className + " ";
        len = str.length;

        str = str.replace(" normal ", " ");

        if (str.length != len) {
            str += " black";
        } else {
            str = str.replace(" black ", " ");

            if (str.length != len) {
                str += " normal";
            }
        }

        obj.className = str.replace(/^\s+|\s+$/g, "");
    }
}

This function stores the length, attempts to replace a class, checks if it was successfully removed by comparing old and new lengths, and then applies the necessary changes.

Note: This method will toggle classes smoothly under the condition that the two classes are not present simultaneously from the start.

DEMO

Answer 4

If you don't anticipate needing to add, remove, or toggle classes frequently, a simpler approach like the code below may be more suitable than creating multiple functions as suggested in jfriend00's answer.

Here is an alternative method for those who prefer not to clutter their code with numerous functions that won't be used often:

function toggle(id) {
    var obj = document.getElementById(id), str, len;

    if (obj) {
        str = " " + obj.className + " ";
        len = str.length;

        str = str.replace(" normal ", " ");

        if (str.length != len) {
            str += " black";
        } else {
            str = str.replace(" black ", " ");

            if (str.length != len) {
                str += " normal";
            }
        }

        obj.className = str.replace(/^\s+|\s+$/g, "");
    }
}

This function stores the length, attempts to replace a class, checks if it was successfully removed by comparing old and new lengths, and then applies the necessary changes.

Note: This method will toggle classes smoothly under the condition that the two classes are not present simultaneously from the start.

DEMO

Answer 5

Answer №3

It's uncertain if this solution aligns with your requirements as the solutions provided appear quite complex to me. Nevertheless, I found a way to add a new class without removing the existing one. Here's how I implemented it:

menu.children[i].getElementsByTagName('a')[0].**classList.add('resetAfter')**;

In this code snippet, I utilized the classList.add() method to append classes to an anchor tag.

Answer 6

It's uncertain if this solution aligns with your requirements as the solutions provided appear quite complex to me. Nevertheless, I found a way to add a new class without removing the existing one. Here's how I implemented it:

menu.children[i].getElementsByTagName('a')[0].**classList.add('resetAfter')**;

In this code snippet, I utilized the classList.add() method to append classes to an anchor tag.

Using JavaScript to append a class, rather than replacing it

Answer №1

Answer №2

Answer №3

Similar questions

Material UI Grid has a problem with inconsistent column width when using direction='column' and flexWrap='wrap' attribute combination

What is the best way to send variables from one page to another using jQuery or Javascript?

Can you explain the significance of this code snippet 'true <=> false'?

What is the best way to achieve CSS rounded corners while keeping the border lines sharp?

Mastering CSS Sprites: A Guide to Aligning Sprite Buttons at the Bottom

Creating a half-page Bootstrap Carousel: Steps and Tips

"During page initialization, Angular.js and Node.js communicate with each other to trigger Node

Encountering Issues with NextJS Dynamic SSR: Mobile Devices stuck on loading screen

The oddity of a lone quotation mark trying to break

Troubleshooting: Issue with AJAX xmlhttp.send() functionality

Accessing the scope value in Angular JS beyond the HTTP call

Guide on parsing a JSON array passed from JavaScript using json_decode?

Prevent draggable canvas elements from overlapping using jQuery

Display content in .innerHTML continuously with Javascript and a while loop

The container div contains a pop-up that expands the height of the container, rather than overlapping on top

Persistent white line in flexbox item that refuses to disappear

Using AngularJS and SpringMVC for uploading multiple files at once

What is the best way to hide the next/previous tabs once the jQuery dataTable has been set up using jSON data

Error Handling with Node.js Sequelize RangeError

Why isn't the background-image : url() function cooperating in TypeScript?