我想清空所有 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 执行此操作?
最佳答案
使用查询字符串[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
手动迭代索引的循环。
关于javascript - 如何清空所有 HTML 元素中的所有类属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59476523/