Добавить класс

  • Cross Compatible

    В следующем примере мы добавим элемент classname в элемент <body>. Это совместимо с IE-8.

    var a = document.body;
    a.classList ? a.classList.add('classname') : a.className += ' classname';
    

    Это сокращение для следующего.

    var a = document.body;
    if (a.classList) {
        a.classList.add('wait');
    } else {
        a.className += ' wait';
    }
    

  • Производительность

    Если вы больше заинтересованы в производительности по сравнению с кросс-совместимостью, вы можете сократить ее до следующего, что на 4% быстрее.

    var z = document.body;
    document.body.classList.add('wait');
    

  • Удобство

    В качестве альтернативы вы можете использовать jQuery, но результирующая производительность значительно медленнее. 94% медленнее в соответствии с jsPerf

    $('body').addClass('wait');
    


Удаление класса

  • Производительность

    Использование jQuery выборочно – лучший метод для удаления класса, если вы заинтересованы в производительности

    var a = document.body, c = ' classname';
    $(a).removeClass(c);
    

  • Без jQuery он на 32% медленнее
    var a = document.body, c = ' classname';
    a.className = a.className.replace( c, '' );
    a.className = a.className + c;
    

Ссылки