Как на чистом Javascript удалить классы элемента по маске

16.02.2022

Допустим нам нужно заменять класс элемента вида "show-front" (маска "show-*") на "show-left" у элемента. Конечно, если классы известны, можно сначала попробовать удалить все, а потом поставить нужный, но это топорно.

Поэтому придется написать свой метод на чистом javascript.

Итак основная функция:

 
function removeClasses(el, prefix) {
    let classes = el.className.split(" ").filter(function(c) {
        return c.lastIndexOf(prefix, 0) !== 0;
    });
    el.className = classes.join(" ").trim();
}

Также бонусом пример, где по таймеру меняются классы у кубика:

 

function removeClasses(el, prefix) {
    let classes = el.className.split(" ").filter(function(c) {
        return c.lastIndexOf(prefix, 0) !== 0;
    });
    el.className = classes.join(" ").trim();
}

const cube = document.getElementById("cube");

let aSides = ["front", "back", "right", "left", "top", "bottom"]

function soRotate() {
    const prefix = "show-";
    removeClasses(cube, prefix);
    const rand = Math.floor(Math.random() * aSides.length);
    cube.classList.add(prefix + aSides[rand]);
}

setInterval(soRotate, 4000);

Категории: JavaScript
Яндекс.Метрика