How can I change or add a class of an element created in JavaScript? (Pacman change theme ghosts)

Question

I am developing a simple Pac-man game for school. (HTML, CSS, Vanilla JavaScript) I would like to be able to change the theme of the game (From space to a floral-theme). Changing the background already works, but now I want that the ghost's also get another look when you switch from theme.

I've started with a simple grid in html, and added all the functions in Javascript. The Ghost are made in an array.

<div class="grid"></div>

const grid = document.querySelector('.grid');

class Ghost {
    constructor(className, startIndex, speed) {
        this.className = className
        this.startIndex = startIndex
        this.speed = speed
        this.currentIndex = startIndex
        this.timerId = NaN
    }
}

const ghosts = [
    new Ghost('alien1', 212, 650),
    new Ghost('alien2', 212, 700),
    new Ghost('alien3', 212, 830),
    new Ghost('alien4', 212, 900)
];

 const moveGhost = ghost => {
    const directions = [-1, +1, width, -width]
    let direction = directions[Math.floor(Math.random() * directions.length)]

    ghost.timerId = setInterval(function () {
        //Check if the next box does not contains 'wall' or another ghost
        if (!squares[ghost.currentIndex + direction].classList.contains('wall') && !squares[ghost.currentIndex + direction].classList.contains('ghost')) {
            //If it does not contains one of these to, the ghost can move here
            //Delete all related ghost classes
            squares[ghost.currentIndex].classList.remove(ghost.className, 'ghost', 'scared-alien', 'flower')

            //Change the currentIndex to the next box
            ghost.currentIndex += direction

            //Draw the ghost in the nex/new box
            squares[ghost.currentIndex].classList.add(ghost.className, 'ghost')

            //If it contains 'ghost' or 'wall' move into another direction
        } else direction = directions[Math.floor(Math.random() * directions.length)]


        //If ghost is scared
        if (ghost.isScared) {
            squares[ghost.currentIndex].classList.add('scared-alien')
        }

        //If ghost is scared and bumps into
        if (ghost.isScared && squares[ghost.currentIndex].classList.contains('pac-man')) {
            squares[ghost.currentIndex].classList.remove(ghost.className, 'ghost', 'scared-alien')
            ghost.currentIndex = ghost.startIndex
            score += 100
            squares[ghost.currentIndex].classList.add(ghost.className, 'ghost')
        }
        checkForGameOver()
    }, ghost.speed)
} 

To change a theme you must click a button, and there for i have these functions;

const init = () => {
    buttonSpace.addEventListener('click', themeSpace)
    buttonFlower.addEventListener('click', themeFlower)
}

const buttonSpace = document.querySelector('.btnSpace');
const buttonFlower = document.querySelector('.btnFlower');
const body = document.getElementsByTagName('body');

const themeSpace = () => {
    body[0].style.backgroundImage = "url(../assets/back-space.jpg)";
}

const themeFlower = () => {
    body[0].style.backgroundImage = "url(../assets/back-leaves.jpg)";
}

init();

How can I add a className or change the className of Ghost (alien.1, alien2, ... change to flowre1, flower 2, ...) when I click the button? So I can add another css-styling to change the appearance of the ghost on the grid.