使用 javascript 在窗口加载后删除 body 类

Remove Body Class After Window Load with Javascript

本文关键字：删除 body 加载 javascript 窗口 使用      更新时间：2023-09-26

我在正文上使用CSS类来停止文档加载时运行的过渡。一旦窗口加载了JavaScript（没有jQuery），我如何删除它？

.HTML： 

<body class="preload">

.css：

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

这将是jQuery等价物*除了我没有使用jQuery：

$("window").load(function() {
  $("body").removeClass("preload");
});

这应该可以解决问题：

window.addEventListener(
    'load',
    function load()
    {
        window.removeEventListener('load', load, false);
        document.body.classList.remove('preload');
    },
    false);

使用 addEventListener 意味着它不会干扰其他库等可能附加的任何其他事件侦听器。

一旦事件触发，上面的代码也将删除事件侦听器。

我本以为事件侦听器应该在document，但显然这不起作用。

这样的东西应该适用于所有浏览器：

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

德鲁的回答很好，但是classList在旧版本的IE和window.addEventListener中不受支持，如果这很重要的话。

相关文章：