Search code examples
javascripthtmltampermonkey

Changing a class name in HTML using Tampermonkey

So I'm reviewing the code of a website my friend coded, and I wanted to know if there is a way that I can change all elements with a specific class name, to another using Tampermonkey.

Here's my code at the moment:

// @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";

The "tampermonkey script running" badge shows up in the toolbar meaning that the script is running, but the class names aren't changing and the way the website looks doesn't change either.

Any suggestions?

Solution

  • Multiple classes can be applied to multiple elements, and there can be multiple elements that share the class.

    You'll want to run through them all in a loop so you can reach them all.

    Also, you can use Element.classList, which is a nice way to change just what you want without messing with other classes.

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

    If you wanted to overwrite the classes, just do elem.setAttribute('class', 'svg-sprite-vs top-point-full')