Safe AND quickest way to add a css class to the body of the DOM

Question

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

I am not sure what you mean by 'safe' - that seems perfectly safe and fast (how fast depends on the amount of content). What I usually do, to avoid a flicker effect, is hide the body by CSS and show it by jQuery after all the scripts have run. It does slip up from time to time, for example where an element is sized based on the size of another element, but those scripts just need to go after the line which shows the body. — ClarkeyBoy, Jul 03 '13 at 20:35
safest and fastest way would be to go in the HTML and add the class to the `` element — wirey00, Jul 03 '13 at 20:43
surely the fastest and safest way is to put it _in the body tag_ ?! — Alnitak, Jul 03 '13 at 20:53
@Alnitak true, but I'm using a ASP.NET master page and I only want this class to be added when rendering the home page. — contactmatt, Jul 03 '13 at 21:47

score 105 · Accepted Answer · edited Jul 02 '20 at 10:06

105

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

edited Jul 02 '20 at 10:06

ArnoutPullen

3
1

answered Jul 03 '13 at 20:35

20

or for newer ones `document.body.classList.add("home");` – PSL Jul 03 '13 at 20:36
3

make sure it's inside `` – Dharman Jul 03 '13 at 20:36
@PSL: Did you really try to compare *those*??? That test (assigning a handler vs executing a jQuery snippet) makes absolutely no sense, it proves nothing. – Bergi Jul 03 '13 at 20:38
@Bergi wanted to add an answer and of course this has to be faster with no doubts, felt it is so simple so thought let me put a proof as well in the answer.. :) haha – PSL Jul 03 '13 at 20:39
@PSL: [Your test case "body"](http://jsperf.com/classlist-adclass) doesn't even *touch* the body. It just repeatedly assigns a function to `window.onload`. [This one](http://jsperf.com/classlist-adclass/5) would be more representative if assigning to `className` would remove duplicates (Tamil's one with the existence check is better) – Bergi Jul 03 '13 at 20:49
1

Why not `document.body.className += ' home';`? Am I missing something in regards to the extra plus sign? – Pete Nov 01 '18 at 18:32
1

@Pete: No, but I vote to leave it like this to accentuate the need of the space. But that is just my opinion. Also you suggested too many spaces. – Lain Jul 02 '20 at 09:08

score 3 · Answer 2 · answered Jul 03 '13 at 20:34

3

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.

answered Jul 03 '13 at 20:34

Karl-André Gagnon

32,531
5
47
70

Safe AND quickest way to add a css class to the body of the DOM

2 Answers2

Linked