6

I placed a class in my <html> element called "no-js". This indicates that the user isn't using javascript, (whether it be disabled or blocked). And then, in a script file I created, I want to revoke "no-js" and inject "js" so that I can determine if the user is using javascript or not via classes. I tried using the replace() method by querying the html tag, but it isn't working. Here's what I have:

var html = document.getElementsByTagName("html")[0];
if(html.className == "no-js") {
    html.className.replace("no-js", "js"); // user has JS enabled
}

There are no errors in Google Chrome or Firefox's bug console, but neither is it changing no-js to js. I would use the <noscript> tag but I like to keep the markup side of it clean.

Jace Cotton
  • 2,004
  • 1
  • 21
  • 38

4 Answers4

9

replace returns the new string, it doesn't modify the original.

Try html.className = 'js', since you've already established that it's the only class name with your if statement.

EDIT: Also, the <html> tag is already available as document.documentElement.

document.documentElement.className = 'js';

That's all you need, really. No if statement, no variable, nothing.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • Oh yeah! I thought that would *add* `js` to the html, not replace. But to do that I would have to do `+=`. It worked! Thanks! – Jace Cotton Feb 16 '13 at 17:17
5

The accepted answer is indeed correct, but this way will replace all classes of the <html>, not only .no-js.

This little script will do the same thing, but will instead search only for the no-js class and rewrite it.

document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/g, '') + ' js ';

Took script from here, very simple! http://snipplr.com/view/63895/remove-nojs-class-from-html-tag-add-js-class/

Gruber
  • 2,196
  • 5
  • 28
  • 50
2

You forgot to assign the html.className to the new value:

var html = document.getElementsByTagName("html")[0];
if(html.className == "no-js") {
    html.className = html.className.replace("no-js", "js"); // user has JS enabled
}
Wildhoney
  • 4,969
  • 33
  • 38
1

With a little regex 

(function(html) {
  html.className = html.className.replace(/\bno-js\b/, 'js')
})(document.documentElement);
<!DOCTYPE html>
<html class="no-js">
<head>
 
</body>
</html>
yo_0
  • 21
  • 5