我想在不使用jQuery的情况下重写这一行,因此可以更快地应用(并且在下载jQuery库之前)。这条线是......
$(document).ready(function() { $('body').addClass('javascript'); });
如果我将其添加到html
元素中,我是否可以放弃DOM准备部分?然而,一个问题是验证器不喜欢html
元素上的class属性,即使它是用JS插入的。
那么,如果没有jQuery,我将如何重写呢?
答案 0 :(得分:47)
如果您想要重现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();
}
});
}
答案 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>