Замена определенного класса

05 Ноября 2019 20:08

Допустим, нам надо добавлять/убирать один какой-то класс к элементу не трогая другие классы, но, при этом, наши классы могут быть разными (с префиксом). В данном примере, каждый класс будет заменять друг друга у body при клике на элемент с классом .color. У элементов с классом .color должны быть айдишники, которые мы будем добавлять body в виде классов!

window.addEventListener("load", function() {    
    function checkClass(el) {
        let reg = /(color-(.*))/i
        return el.className.match(reg);
    }
    
    let colors = document.querySelectorAll(".color");
    for(let i = 0; i < colors.length; i++) {
        colors[i].onclick = function(){
            let colorId = this.getAttribute("id");
            let body = document.querySelector("body");
            let needColor = checkClass(body);
            if(needColor != null) {
                let remCol = needColor[0];
                body.classList.remove(remCol);
                body.classList.add(colorId);
            }
        }
    }
});