How do I add a class name to Javascript string?

Question

I'm a JS newbie trying to alter the following code. It looks like it's adding style attributes. I would like to add the class name "reveal" to this string or below. What would that syntax look like? Many thanks for your help, guys!

 inline = ( elem.domEl.getAttribute( 'style' ) ) ? elem.domEl.getAttribute( 'style' ) + 
'; visibility: visible; ' : 'visibility: visible; '

Answer 1

(I guess) the HTML may look like this:

<div class="some other">

In such case, if you do it like

elem.domEl.className = 'reveal';

then you'll get

<div class="reveal">

All styles brought by class some and other are gone! You definitely don't want that, right? Also you don't want repeated classname, something like

<div class="reveal reveal">

So, here are the solutions:

The best way is to use HTML5 API classList:

elem.domEl.classList.contains('reveal') // Check whether element has a classname
elem.domEl.classList.add('reveal') // Add a classname
elem.domEl.classList.remove('reveal') // Remove a classname
elem.domEl.classList.toggle('reveal') // Toggle a classname

If you still want to run the code in out-dated browsers, try these:

// Check whether element has a classname
function hasClass(ele, cls) {
    var clsChecker = new RegExp("\\b" + cls + "\\b");
    return clsChecker.test(ele.className);
}
// Add a classname
function addClass(ele, cls) {
    var clsChecker = new RegExp("\\b" + cls + "\\b");
    if(clsChecker.test(ele.className)) {
        // ele already has the className, don't need to do anything
        return;
    }
    ele.className += (' '+ cls);
}

// Remove a classname
function removeClass(ele, cls) {
    var clsChecker = new RegExp("\\b" + cls + "\\b");
    if(clsChecker.test(ele.className)) {
        // ele does have the className, remove them all (in case repeated)
        ele.className.split(clsChecker).join('');
    }
}

// Toggle a classname
function toggleClass(ele, cls) {
    var clsChecker = new RegExp("\\b" + cls + "\\b");
    if(clsChecker.test(ele.className)) {
        // ele does have the className, remove them all (in case repeated)
        ele.className.split(clsChecker).join('');
    } else {
        // ele doesn't have the classname, add it
        ele.className += (' '+ cls);
    }
}

// Usages
hasClass(elem.domEl, 'reveal') // Check whether element has a classname
addClass(elem.domEl, 'reveal') // Add a classname
removeClass(elem.domEl, 'reveal') // Remove a classname
toggleClass(elem.domEl, 'reveal') // Toggle a classname