How to replace the `no-js` class name by `js` on all elements? [duplicate]

Question

What I’m trying to do is to get the elements with the class name no-js and replace it with js.

I have no idea how to do this. I tried Googling around but couldn’t find anything, so does anyone know how to do this?

My goal is to have a menu show a drop-down navigation when clicked, but if JavaScript is disabled I want it to show on hover with CSS (I’ve already done that).

I’ve put my code on JSFiddle.

Answer 1

You need to iterate the returned elements and replace that portion of the class name on each one:

var els = [].slice.apply(document.getElementsByClassName("no-js"));
for (var i = 0; i < els.length; i++) {
    els[i].className = els[i].className.replace(/ *\bno-js\b/g, "js");
}

Note that getElementsByClassName returns a "live list", which is why it's necessary to first make a copy of the return value (using [].slice) and iterate that list instead).