使用 Tampermonkey 更改 HTML 中的 class 名称

Question

所以我正在审查我朋友编码的网站代码，我想知道是否有一种方法可以使用 Tampermonkey 将所有具有特定 class 名称的元素更改为另一个元素。

这是我目前的代码：

// @name         ClassName Change
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Change class names for website review
// @author       Me
// @match        https://example.com/*
// @grant        none
// @include      https://example.com/*
// ==/UserScript==


const change = document.getElementsByClassName("svg-sprite-vs top-point-empty");

change.className = "svg-sprite-vs top-point-full";

“tampermonkey 脚本运行”标记显示在工具栏中，这意味着该脚本是运行，但 class 名称和网站外观没有变化也没有改变。

有什么建议吗？

Answer 1

多个class可以应用于多个元素，可以有多个元素共享class。

您需要运行循环遍历所有内容，这样您就可以访问所有内容。

此外，您可以使用 Element.classList，这是一种很好的方式来改变您想要的内容，而不会与其他 classes 混淆。

document.querySelectorAll('.svg-sprite-vs.top-point-empty').forEach(elem => {
   elem.classList.remove('top-point-empty');
   elem.classList.add('top-point-full');
});

如果您想覆盖 classes，只需执行 elem.setAttribute('class', 'svg-sprite-vs top-point-full')

使用 Tampermonkey 更改 HTML 中的 class 名称

Changing a class name in HTML using Tampermonkey

javascript

html

tampermonkey