html - JavaScript - Replacing "no-js" class with "js" class not working?

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.

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.

Share Improve this question asked Feb 16, 2013 at 17:12 Jace Cotton 2,0141 gold badge22 silver badges38 bronze badges

It doesn't do the replacement in place. You have to do html.className = html.className.replace("no-js", "js"); – JJJ Commented Feb 16, 2013 at 17:14
html.classList.remove( 'no-js' ); html.classList.add( 'js' ); – philipp Commented Feb 16, 2013 at 17:15

Add a comment |

4 Answers 4

Sorted by: Reset to default 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.

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/

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
}

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - JavaScript - Replacing "no-js" class with "js" class not working? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)