为什么我不能用 javascript 删除这个 class？

Question

我正在尝试通过在 styles 元素上设置 class “骨架”然后在超时后使用 javascript 将其删除来制作骨架加载屏幕。 问题是我无法让 javascript 工作。

这是我的 javascript 删除 class，为什么它不起作用？

const timeout = setTimeout(loading, 3000);

function loading() {
    const element = document.getElementById("skeleton");
    element.classList.remove("skeleton");   
  }

Answer 1

我认为正在发生的事情是您有太多具有相同 ID 的“骨架”元素，并且 ID 必须是唯一的。 因此，删除 id，改为以类为目标，并使用forEach遍历每个类以删除 class。

 const timeout = setTimeout(loading, 3000); function loading() { const skeletons = document.querySelectorAll('.skeleton'); skeletons.forEach(skeleton => { skeleton.classList.remove('skeleton'); }); }

 .skeleton { color: red; }

 <div class="skeleton">One</div> <div class="skeleton">Two</div> <div class="skeleton">Three</div> <div class="skeleton">Four</div>

Answer 2

您正在 Class 上调用 getElmentById。您可以分享 ID 或 class 为骨架的 HTML Elment 试试这个

function loading() {
    const element = document.getElementsByClassName("skeleton")[0];
    element.classList.remove("skeleton");   
  }

Answer 3

我认为它不起作用的原因是您试图从骨架本身移除骨架 class。 尝试以骨架的父元素为目标，然后从父元素中移除骨架。 您是否尝试使用：

const parentNode=document.querySelector(".parentElem");
parentNode.removeChild(document.querySelector(".skeleton"));

您是否注意到您正在尝试使用getElementById获取元素，而您声明的skeleton是 class。