如何检测DOM准备并添加没有jQuery的类？

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...

我想在不使用jQuery的情况下重写这一行，因此可以更快地应用（并且在下载jQuery库之前）。这条线是......

$(document).ready(function() { $('body').addClass('javascript'); });

If I added it to the html element instead, would I be able to leave off the DOM ready part? One problem with this though is the validator doesn't like the class attribute on the html element, even if it is inserted with JS.

如果我将它添加到html元素中，我是否可以放弃DOM准备部分？然而，一个问题是验证器不喜欢html元素上的class属性，即使它是用JS插入的。

So, how would I rewrite that without jQuery?

那么，如果没有jQuery，我将如何重写呢？

8 个解决方案

#1

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

如果要重现jQuery的document.ready事件，可以在适用的情况下使用onreadystatechange或DOMContentLoaded事件：

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();
    }
  });
}

#2

I dont know about vanilla JS, but you can write:

我不知道香草JS，但你可以写：

document.getElementsByTagName('body')[0].className += ' javascript';

at the bottom of the page (before closing the body tag).

在页面底部（关闭body标签之前）。

#3

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中，也许隐藏no-JS-fallback元素，你可以直接在body标签内执行，而不是等待任何事件：

<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.

这是绑定元素的最快方法：在创建它们之后立即执行（如果只需要更改元素，则在open标记内部;如果需要更改其内容，则在close标记之后）。然而，这种方法确实倾向于使用丑陋的

#4

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.

编辑：更新以按标签名称获取元素而不是ID。

#5

Simple:

简单：

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

Or in HTML:

或者在HTML中：

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

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

除非您想要区分“on onload”和“onload”之后，否则您可以静态地执行此操作：

<body class="javascript">...</body>

#6

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

你是否试图将下面的身体放在最后？

<script>
    document.body.className = 'javascript';
</script>

#7

just put this

就这么说吧

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

before </body> tag. Simple and easy (and very close) solution.

在标签之前。简单易用（非常接近）的解决方案。

#8

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

如果只是处理现代浏览器，你可以将它放在开始的body标签之后。

<script>
     document.body.classList.add("javascript");
</script>

#1