I am looking to add a class to the body element of the DOM. For something so simple, and with the body element itself loading quick (at least, I would think it would load quicker than, say, an element buried deem in the DOM), must I really wait for the jQuery Ready event to do such a simple task? I'm looking to avoid a "flicker" effect when adding the style to the body, since I'll have different CSS styles attached to this class take effect when added.
I can do something like:
jQuery(window.document).ready(function () {
jQuery("body").addClass("home");
});
But is there a faster, yet safe way? I don't care if its jQuery or native JavaScript
2 Answers 2
document.body.className += ' home';
Performance comparision : className vs classList vs addClass :
Update(based on PSL's comment)
or for newer ones
document.body.classList.add("home");Make sure you do this under the
<body>, it won't work if applied from a<head>script
8 Comments
document.body.classList.add("home");<body>document.body.className += ' home';? Am I missing something in regards to the extra plus sign?Right after the opening body tag, you can create a script tag :
<body>
<script>
$('body').addClass('home')
</script>
<!-- HTML content bellow -->
</body>
The only condition is that the jQuery is loaded in the head.
<body>element