如何清空所有 HTML 元素的所有類屬性

Question

我想清空所有 html 源代碼類屬性。 例如，我有多個元素值，如 div 元素、標題和段落。 每個 HTML 元素都包含不同的類屬性，就像下面的代碼。：

  <div class="card-body">
    <h5 class="card-title main-text-color ">My Mobile Phone is best
              </h5>
    <p class="">Lorem ipsum dolor sit amet, 
    </p>
    <p class="py-2">
        <a class=" main-color btn  text-light " href="#" class=" ">MORE DETAIL
                </a>
    </p>
</div>

現在我想讓它像下面的代碼一樣：

<div class="">
    <h5 class=" ">My Mobile Phone is best
              </h5>
    <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec imperdiet ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas
    </p>
    <p class="">
        <a class="  " href="#" class=" ">MORE DETAIL
                </a>
    </p>
</div>

如何在瀏覽器中使用 Javascript 執行此操作？

Answer 1

使用查詢字符串[class]並使用querySelectorAll選擇所有具有class屬性的元素，然后將它們的className設置為空字符串：

 document.querySelectorAll('[class]').forEach((elm) => { elm.className = ''; }); console.log(document.body.innerHTML);

 <div class="card-body"> <h5 class="card-title main-text-color ">My Mobile Phone is best </h5> <p class="">Lorem ipsum dolor sit amet, </p> <p class="py-2"> <a class=" main-color btn text-light " href="#" class=" ">MORE DETAIL </a> </p> </div>

如果您想完全刪除類屬性，而不是將它們全部設置為空字符串，請使用

elm.removeAttribute('class');

 document.querySelectorAll('[class]').forEach((elm) => { elm.removeAttribute('class'); }); console.log(document.body.innerHTML);

 <div class="card-body"> <h5 class="card-title main-text-color ">My Mobile Phone is best </h5> <p class="">Lorem ipsum dolor sit amet, </p> <p class="py-2"> <a class=" main-color btn text-light " href="#" class=" ">MORE DETAIL </a> </p> </div>

在不支持NodeList.prototype.forEach舊瀏覽器上，您可以使用for..of （如果支持 ES6）或帶有手動迭代索引的普通for循環。

Answer 2

你可以簡單地試試這個：

獲取所有 html 元素，遍歷它們並將 class 屬性設置為空字符串

const htmlElements = document.body.getElementsByTagName("*");

for (let i = 0; i < htmlElements.length; i++) {
  htmlElements[i].className=''
}