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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T17:48:34+0000

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

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags