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

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.

updated my answer to show the full code to both parts of your question. 1) change class 2) make + button toggle subnav :) — vdbuilder, Jan 03 '12 at 08:13
All answers here are either incorrect or outdated. The correct, modern answer is `document.querySelectorAll(".no-js").forEach(({ classList }) => classList.replace("no-js", "js"));`. See [How to change all classname elements of specific classname](/a/69246456/4642212). — Sebastian Simon, Sep 19 '21 at 20:08

Wayne · Answer 1 · 2012-01-03T07:18:46.113

11

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).

edited Jan 03 '12 at 07:18

answered Jan 03 '12 at 07:01

Wayne

59,728
15
131
126

Thank you! I was searching for the getElementById-less solution for a time. My goal was to create this Drupal hack: https://groups.drupal.org/node/10919#comment-1152470 – eapo Dec 10 '16 at 00:31

score 7 · Answer 2 · answered Jan 03 '12 at 07:01

by javascript you can change the class name using

document.getElementById('elementid').className = 'classname'

if you want to add a new class by javascript use

document.getElementById('elementid').className += ' classname'

if you want to replace class name with other things use strings replace function

document.getElementById('elementid').className = document.getElementById('elementid').className.replace(your replace code)

score 4 · Answer 3 · edited Dec 06 '17 at 18:25

look like a question, but seems to be the preferred way of doing it...

(function(html){html.className = 
   html.className.replace(/\bno-js\b/,'js')})(document.documentElement);

Example:

<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head itemscope itemtype="http://schema.org/WebSite">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
    <title>Example Site| My Site Description</title>

Notice the location of this early on the document head... This ensures that it get's added immediately. This is much faster approach than a jquery alternative. I believe this is how modernizr does it.

katspaugh · Answer 4 · 2012-01-03T07:36:51.297

Doesn't the name of the getElementsByClassName method give you a hint that it should return not a single element but multiple elements? Because there can be many elements with the same class in the document. Read the docs more carefully.

If you're familiar with CSS, there is document.querySelectorAll method, which retrieves elements via CSS selectors.

var plusLinks = document.querySelectorAll('a.no-js')

Then you can access individual links by their numeric index:

var firstLink = plusLinks[0]

As for the class attribute (and it is class attribute, not no-js attribute), you shouldn't remove it, but set it to a new value.

firstLink.setAttribute('class', 'js')

Or:

firstLink.className = 'js'

Since you want to remove the hover effect, and the body element already has no-js class on it, you can replace the class once for the whole page:

document.body.className = 'js'

score -2 · Answer 5 · answered Jan 03 '12 at 07:02

Step 1 - get element by it's unique ID-

Element = Document.GetElementByID("whatever");

Step 2- remove the attribute class-

Element.RemoveAttribute("class");

Step 3 - create attribute class -

    var attribute = document.createAttribute("class");
    attribute.nodeValue = "someclassnamehere"
    Element.setAttributeNode(attribute);

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

5 Answers5

Linked