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

时间:2009-11-25 06:49:22

标签: javascript jquery

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

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

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

那么,如果没有jQuery,我将如何重写呢?

8 个答案:

答案 0 :(得分:47)

如果您想要重现jQuery的document.ready事件,可以在适用的情况下使用onreadystatechangeDOMContentLoaded个事件:

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

答案 1 :(得分:2)

我不知道vanilla JS,但你可以写:

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

位于页面底部(在关闭body标签之前)。

答案 2 :(得分:1)

如果您的目标是在加载页面时立即将类添加到body,也许隐藏no-JS-fallback元素,您可以直接在body标签内部执行此操作,而不是等待任何事件:

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

(虽然一般情况下,如果这样做的话,最好在删除脚本元素时删除回退元素,这样如果一个脚本错误输出页面上的所有其他组件就不会中断。)

这是绑定到元素的最快方法:在创建它们之后立即执行(如果只需要更改元素,则在open标记内部;如果需要更改其内容,则在close标记之后)。然而,这种方法确实倾向于使用丑陋的<script>块来丢弃页面,这就是为什么更多人将代码放在底部或者使用加载/就绪处理程序。

答案 3 :(得分:0)

window.onload = function() {
   var elmt =  document.getElementsByTagName('body');
   if(elmt){
      elmt[0].className = 'javascript';
   }
}

应该这样做。

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

答案 4 :(得分:0)

简单:

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

或在HTML中:

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

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

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

答案 5 :(得分:0)

您是否尝试将以下内容放在身体的最后?

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

答案 6 :(得分:0)

刚刚把这个

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

</body>标记之前。简单易用(非常接近)的解决方案。

答案 7 :(得分:0)

如果只是处理现代浏览器,您可以在打开body标记之后放置它。

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