add (not replace) css class using javascript

Question

I am using a ddsmoothmenu, and it is constructed in such a way that a class name can be dynamically added to the parent menu container via the plugin, and once the class is applied to the parent container, all css will also apply on the menu. Here is how the ddsmoothmenu is passing classname:

<div id="myMenu">
  <ul>
     <li>.....</li>
  </ul>
</div>

And the rendering of the menu is done by the following, where the 'classname' is being passed via the plugin to be added dynamically to the menu container.

ddsmoothmenu.init({
    mainmenuid: 'myMenu',
    orientation: 'h',
    classname: 'ddsmoothmenu',
    contentsource: 'markup'
});

So far so good. But I need to add a 'noindex' class to the menu container. I thought it's easy I will simply add in the markup, but the problem is the plugin replaces my class and add whatever is supplied from the above 'classname' parameter.

In the plugin itself: this line of code is the culprit:

$mainmenu.parent().get(0).className = setting.classname || "ddsmoothmenu"

where $mainmenu is basically the unordered list.

I know I can do a simple += to concatenate classnames. But I am not sure if that is possible in the above as it has the ternary if..else setup

Can I do $mainmenu.parent().get(0).className += setting.classname || "ddsmoothmenu" $mainmenu.parent().get(0).className += setting.classname || "ddsmoothmenu"

I want something like the above line so that the class that I have hard coded in the markup gets to stay while the one added by the plugin simply gets appended to the class I have added directly in the markup?

Answer 1

All you have to do is take the current classname, add a space to it, and add the second classname. I understand you want to use a library but plain Javascript can do this easily:

function addclass(name,id) {
    var element = document.getElementById(id); //not sure how you want to obtain your element
    var currentclass = element.className;
    element.className = currentclass + " " + name;
}

Again, not sure how you want to select document objects but as long as you add the space between class names, all should be good.

Answer 2

Here is a description from the jquery api doc on the addclass function:

Description: Adds the specified class(es) to each of the set of matched elements.

version added: 1.0.addClass( className ) className Type: String One or more space-separated classes to be added to the class attribute of each matched element.

version added: 1.4.addClass( function ) function Type: Function( Integer index, String currentClassName ) => String A function returning one or more space-separated class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, this refers to the current element in the set.

Below is an example use of jquery's addclass function that seems to do exactly what you're asking for.

$( "p" ).last().addClass( "selected" );

(ugh keep forgetting I can't post HTML)

Essentially it just tacks on the specified class to the selected element without removing any other classes.

Here is the link to the api doc

Answer 3

I like to use classie . it provides a stable way to add or remove classes to to DOM. The good thing is, it provides a fallback for Browsers without the classList function (eg IE8).

If your just looking for the Code Snippet:

addClass = function( elem, c ) {
    elem.classList.add( c );
};

and

addClass = function( elem, c ) {
    elem.className = elem.className + ' ' + c;
};