為什么我不能用 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。