Replacing "no-js" with “js” class in the body element properly I currently have a WP site and in the header, I've put this in:

...
&lt;body &lt;?php body_class('no-js');?&gt;&gt;
    &lt;script&gt;document.body.className = document.body.className.replace( 'no-js' , 'js' );&lt;/script&gt;
...


It works flawlessly and I've got no complaints, as it accomplishes the following:


Does not rely on jQuery to load, which is placed at the bottom of the code after the body element along with other js files.
Runs before the visible elements are loaded and doesn't change the look of the site after the site has loaded, meaning the user sees exactly what is supposed to be seen.
Code is placed immediately after the body element is opened so it can find the body after the browser reads that it exists, meaning it's quick, small, and easy to spot.




I'm wondering if there's a more efficient way of doing this.


This comment adds it as a function. Why a function and not just drop it in like I did?
Here is where I think I originally got my code from.
Here's a performance comparison I found from an SO answer, but it doesn't help me much.


Solution doesn't have to be js; it can be anything, as long as it's the right way. Obviously I'm using the classes to distinguish when js is working or not for the corresponding CSS styling to apply.
It's a decent and pretty bullet-proof solution. Modern browsers also support the classList API, so you can do:

document.body.classList.remove('no-js');


It's a slightly safer solution, as the original could technically replace parts of a word (like abcno-jsfoo). Not really a concern here, but still.

To avoid that, and still use the original solution, you could use a regular expression to match word boundaries too:

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