如何使用Vanilla JS恢复类列表

Question

我正在用JS处理div上的类列表，添加一个具有随机数的类，例如target--random-number-2 。

我本质上是想在下次调用该函数时“恢复”或“重置”类列表，以重新添加具有随机数的另一个类，这样我就不会以诸如target--random-number-1 target--random-number-2 target--random-number-3 。 最好的方法是什么？

这是我的笨拙尝试（不起作用）：

function random_class_number(){
    // if we've changed the target...
    if (document.querySelector('#target').classList.contains('target-has-random-number')) {
        // restore the previous classlist
        document.querySelector('#target').classList = stored_classlist;
    } else {
        // if we haven't yet changed the target, store the classlist
        var stored_classlist = document.querySelector('#target').classList;
    }

    const random_number = Math.floor((Math.random() * 3) + 1);
    document.querySelector('#target').classList.add('target--random-number-' + random_number);
    document.querySelector('#target').classList.add('target-has-random-number');
}

附言：我试图摆脱jQuery，所以请没有jQuery的答案。

Answer 1

• 您可以使用data-attributes存储当前的类。
• 您可以动态创建data-attributes 。

 function random_class_number() { var target = document.querySelector('#target'); if (target.classList.contains('target-has-random-number')) { target.classList.add(...target.dataset.classes.split(/\\s+/g)); console.log('Contains'); } else { console.log('Doesnt contain'); // target.classList.value returns a string of the current classList collection. target.dataset.classes = target.classList.value.split(/\\s+/g).join(' '); // This is to keep the initial classes separated by one space. } const random_number = Math.floor((Math.random() * 3) + 1); target.classList.add('target--random-number-' + random_number, 'target-has-random-number'); // You can pass multiple classes in one call of function 'add'. } random_class_number(); console.log(document.querySelector('#target')); random_class_number(); console.log(document.querySelector('#target')); 

 .initial-class:before { content: 'initial-class - ' } .initial-class:after { content: ' - initial-class2' } 

 <div class='initial-class initial-class2' id='target'>DIV</div> 

资源

• Element.classList
• HTMLElement.dataset

Answer 2

归功于cBroe的建议，这就是我最终采用的类似方法，但最终并没有影响到我现有的CSS。

function random_class_number(){
    const random_number = Math.floor((Math.random() * 3) + 1);
    document.querySelector('#target').dataset.javascript = 'target--random-number-' + random_number;
}

CSS

[data-javascript="target--random-number-1"] {
    background: red;
}