发表新帖
发表新帖

How can I detect DOM ready and add a class without jQuery?

后端 未结
关注
8 1329
独厮守ぢ
独厮守ぢ 2020-11-28 06:04

I want to rewrite this line without using jQuery so it can be applied quicker (and before the downloading of the jQuery library). The line is...

$(document).
相关标签:
8条回答
  • 抹茶落季
    2020-11-28 06:41

    If just dealing with modern browsers, you could place this just after the opening body tag.

    <script>
     document.body.classList.add("javascript");
</script>
    0 讨论(0)
  • 醉话见心
    2020-11-28 06:50

    Simple:

    window.onload = function() {
  document.body.className = "javascript";
}

    Or in HTML:

    <body onload="document.body.className = 'javascript'">...</body>

    Unless you want to differentiate between "before onload" and "after onload", you can do it statically:

    <body class="javascript">...</body>
    0 讨论(0)
  • 一生所求
    2020-11-28 06:51

    Did you try to put at the very end of your body the following?

    <script>
    document.body.className = 'javascript';
</script>
    0 讨论(0)
  • 轻奢々
    2020-11-28 06:52 
    window.onload = function() {
   var elmt =  document.getElementsByTagName('body');
   if(elmt){
      elmt[0].className = 'javascript';
   }
}

    That should do it.

    EDIT: Updated to get element by tag name not ID.

    0 讨论(0)
  • 旧巷少年郎
    2020-11-28 06:55

    If you want to reproduce the jQuery's document.ready event, you can use the onreadystatechange or DOMContentLoaded events where applicable:

    function domReady () {
  document.body.className += " javascript";
  // ...
}

// Mozilla, Opera, Webkit 
if ( document.addEventListener ) {
  document.addEventListener( "DOMContentLoaded", function(){
    document.removeEventListener( "DOMContentLoaded", arguments.callee, false);
    domReady();
  }, false );

// If IE event model is used
} else if ( document.attachEvent ) {
  // ensure firing before onload
  document.attachEvent("onreadystatechange", function(){
    if ( document.readyState === "complete" ) {
      document.detachEvent( "onreadystatechange", arguments.callee );
      domReady();
    }
  });
}
    0 讨论(0)
  • 青春惊慌失措
    2020-11-28 07:00

    If your aim is to add the class to body immediately as the page is loaded, perhaps to hide no-JS-fallback elements, you could do that just immediately inside the body tag rather than waiting for any events:

    <body>
    <script type="text/javascript">
        document.body.className+= ' javascript';
    </script>

    (although in general if that's the aim it's better to remove the fallback elements as you go along replacing them with scripted elements, so that if one piece of script errors out all the other components on the page don't break.)

    This is the fastest way to bind to elements: do so just immediately after creating them (inside the open tag if you only need to alter the elements; just after the close tag if you need to alter their contents). However this approach does tend to litter the page with ugly <script> blocks, which is why more people put the code all at the bottom or use an load/ready-handler.

    0 讨论(0)
 看不清?
提交回复
热议问题