Как я могу изменить класс элемента HTML в ответ на onclickсобытие, используя JavaScript?

Современные методы HTML5 для изменения классов

Современные браузеры добавили classList, который предоставляет методы, облегчающие манипулирование классами без необходимости в библиотеке:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

К сожалению, они не работают в Internet Explorer до v10, хотя есть некоторая поддержка, чтобы добавить поддержку для IE8 и IE9, доступную на этой странице . Это, однако, становится все более и более поддерживаемым .

Простое кросс-браузерное решение

Используется стандартный способ выбора элемента в JavaScript document.getElementById("Id"), который используют следующие примеры - вы, конечно, можете получить элементы другими способами, и в правильной ситуации можете просто использовать thisвместо этого - однако, вдаваясь в подробности, это выходит за рамки ответа.

Чтобы изменить все классы для элемента:

Чтобы заменить все существующие классы одним или несколькими новыми классами, установите атрибут className:

document.getElementById("MyElement").className = "MyClass";

(Вы можете использовать разделенный пробелами список для применения нескольких классов.)

Чтобы добавить дополнительный класс к элементу:

Чтобы добавить класс к элементу, не удаляя / не затрагивая существующие значения, добавьте пробел и новое имя класса, например, так:

document.getElementById("MyElement").className += " MyClass";

Чтобы удалить класс из элемента:

Чтобы удалить отдельный класс для элемента, не затрагивая другие потенциальные классы, требуется простая замена регулярного выражения:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Объяснение этого регулярного выражения следующее:

(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)

gФлаг указует заменить на повторение по мере необходимости, в случае , если имя класса было добавлено несколько раз.

Чтобы проверить, применяется ли класс к элементу:

Тот же самый regex, использованный выше для удаления класса, может также использоваться как проверка того, существует ли определенный класс:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

Назначение этих действий событиям onclick:

Хотя возможно написать JavaScript непосредственно внутри атрибутов события HTML (например, onclick="this.className+=' MyClass'"), это не рекомендуемое поведение. Особенно в больших приложениях, более поддерживаемый код достигается путем отделения разметки HTML от логики взаимодействия JavaScript.

Первый шаг к достижению этого - создание функции и вызов функции в атрибуте onclick, например:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

_{(Не обязательно иметь этот код в тегах скрипта, это просто для краткости примера, и более подходящим может быть включение JavaScript в отдельный файл.)}

Второй шаг - переместить событие onclick из HTML в JavaScript, например, используя addEventListener.

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(Обратите внимание, что часть window.onload необходима для того, чтобы содержимое этой функции выполнялось после завершения загрузки HTML - без этого MyElement может не существовать при вызове кода JavaScript, так что строка не будет работать.)

Фреймворки и библиотеки JavaScript

Приведенный выше код написан на стандартном JavaScript, однако обычной практикой является использование инфраструктуры или библиотеки для упрощения общих задач, а также для исправления ошибок и крайних случаев, о которых вы могли не подумать при написании кода.

Хотя некоторые люди считают излишним добавлять среду ~ 50 КБ для простого изменения класса, если вы выполняете какой-либо значительный объем работы с JavaScript или что-то, что может иметь необычное поведение в разных браузерах, это стоит рассмотреть.

(Грубо говоря, библиотека - это набор инструментов, предназначенных для конкретной задачи, в то время как среда обычно содержит несколько библиотек и выполняет полный набор обязанностей.)

Приведенные выше примеры были воспроизведены ниже с использованием jQuery , вероятно, наиболее часто используемой библиотеки JavaScript (хотя есть и другие, заслуживающие изучения).

(Обратите внимание, что $здесь находится объект jQuery.)

Изменение классов с помощью jQuery:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

Кроме того, jQuery предоставляет ярлык для добавления класса, если он не применяется, или удаления класса, который делает:

$('#MyElement').toggleClass('MyClass');

Назначение функции событию click с помощью jQuery:

$('#MyElement').click(changeClass);

или без идентификатора:

$(':button:contains(My Button)').click(changeClass);

Вы также можете просто сделать:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

И переключить класс (удалить, если существует, добавить его):

document.getElementById('id').classList.toggle('class');

В одном из моих старых проектов, в которых не использовался jQuery, я построил следующие функции для добавления, удаления и проверки наличия элемента:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

Так, например, если я хочу onclickдобавить некоторый класс к кнопке, я могу использовать это:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

Теперь наверняка было бы лучше использовать jQuery.

Вы можете использовать node.classNameтак:

document.getElementById('foo').className = 'bar';

Это должно работать в IE5.5 и выше в соответствии с PPK .

Ух ты, удивляешься, что здесь так много ответов ...

<div class="firstClass" onclick="this.className='secondClass'">

Используя чистый код JavaScript:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

Это работает для меня:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

Также вы можете расширить объект HTMLElement, чтобы добавить методы для добавления, удаления, переключения и проверки классов ( gist ):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

А затем просто используйте вот так (по клику добавит или удалит класс):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

Вот демо .

Просто для добавления информации из другой популярной среды, Google Closures, посмотрите их класс dom / classes :

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

Одним из вариантов выбора элемента является использование goog.dom.query с селектором CSS3:

var myElement = goog.dom.query("#MyElement")[0];

Пара небольших заметок и изменений в предыдущих регулярных выражениях:

Вы захотите сделать это глобально, если список классов имеет имя класса более одного раза. И вы, вероятно, захотите убрать пробелы из концов списка классов и преобразовать несколько пробелов в один пробел, чтобы избежать получения пробелов. Ничто из этого не должно быть проблемой, если единственный код, помеченный именами классов, использует приведенное ниже регулярное выражение и удаляет имя перед его добавлением. Но. Ну, кто знает, кто может пить из списка имен классов.

Это регулярное выражение не учитывает регистр, поэтому ошибки в именах классов могут отображаться до того, как код будет использован в браузере, который не заботится о регистре в именах классов.

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

Измените класс CSS элемента с помощью JavaScript в ASP.NET :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub

Я бы использовал jQuery и написал бы что-то вроде этого:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

Этот код добавляет функцию, которая вызывается при нажатии элемента id some-element . Функция добавляет клик к атрибуту class элемента, если он еще не является его частью, и удаляет его, если он там есть.

Да, вам нужно добавить ссылку на библиотеку jQuery на своей странице, чтобы использовать этот код, но, по крайней мере, вы можете быть уверены, что большинство функций в библиотеке будут работать практически во всех современных браузерах, и это сэкономит ваше время на реализацию свой собственный код, чтобы сделать то же самое.

Спасибо

Линия

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

должно быть:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

Изменить класс элемента в обычном JavaScript с поддержкой IE6

Вы можете попытаться использовать attributesсвойство узла, чтобы сохранить совместимость со старыми браузерами, даже IE6:

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})

.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}

<span id="message" class="">Click me</span>

Вот моя версия, полностью рабочая:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

Применение:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

Вот toggleClass для переключения / добавления / удаления класса элемента:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

см jsfiddle

Также смотрите мой ответ здесь для создания нового класса динамически

Я использую следующие ванильные функции JavaScript в моем коде. Они используют регулярные выражения и indexOfне требуют кавычек специальных символов в регулярных выражениях.

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

Вы также можете использовать element.classList в современных браузерах.

ВАРИАНТЫ.

Вот несколько примеров стилей и классов, чтобы вы могли увидеть, какие опции у вас есть и как использовать classListто, что вы хотите.

style против classList

Разница между styleиclassList в том , что с styleвы добавляете в свойствах стиля элемента, но classListэто своего рода контроль класс (ы) элемента ( add, remove, toggle, contain), я покажу вам , как использовать addи removeметод , так как те популярные.

Пример стиля

Если вы хотите добавить margin-topсвойство в элемент, вы должны сделать это:

// Get the Element
const el = document.querySelector('#element');

// Add CSS property 
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.

Пример classList

Допустим, у нас есть <div class="class-a class-b">, в этом случае мы уже добавили 2 класса к нашему элементу div,class-a и class-b, и мы хотим контролировать , какие классы removeи что класс к add. Это где classListстановится удобно.

Удалить class-b

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

Добавить class-c

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")

Просто думал, что я добавлю это:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

просто скажите, myElement.classList="new-class"если вам не нужно поддерживать другие существующие классы, в этом случае вы можете использовать classList.add, .removeметоды.

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});

div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}

<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>

Хорошо, я думаю, что в этом случае вы должны использовать jQuery или написать свои собственные методы на чистом javascript, я предпочитаю добавлять свои собственные методы, а не вставлять все jQuery в мое приложение, если мне это не нужно по другим причинам.

Я хотел бы сделать что-то похожее на приведенное ниже в качестве методов в моей структуре JavaScript, чтобы добавить несколько функций, которые обрабатывают добавление классов, удаление классов и т. Д., Аналогично jQuery, это полностью поддерживается в IE9 +, также мой код написан на ES6, поэтому вам нужно чтобы убедиться, что ваш браузер поддерживает его или вы используете что-то вроде babel, в противном случае необходимо использовать синтаксис ES5 в вашем коде, также таким образом мы находим элемент по идентификатору, что означает, что элемент должен иметь идентификатор для выбора:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

и вы можете просто вызвать использование их, как показано ниже, представьте, что ваш элемент имеет идентификатор «id» и класс «class», убедитесь, что вы передаете их в виде строки, вы можете использовать утилиту, как показано ниже:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

classList DOM API:

Очень удобным способом добавления и удаления классов является classListDOM API. Этот API позволяет нам выбирать все классы определенного элемента DOM, чтобы изменить список с помощью JavaScript. Например:

const el = document.getElementById("main");
console.log(el.classList);

<div class="content wrapper animated" id="main"></div>

В журнале мы можем наблюдать, что мы получаем объект не только с классами элемента, но также со многими вспомогательными методами и свойствами. Этот объект наследуется от интерфейса DOMTokenList , интерфейса, который используется в DOM для представления набора разделенных пробелами токенов (например, классов).

Пример:

const el = document.getElementById('container');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}

button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}

<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>
  

Да, есть много способов сделать это. В синтаксисе ES6 мы можем легко достичь. Используйте этот код для переключения добавления и удаления класса.

const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){
  
  tab.onclick=function(){
    
  let activetab=document.querySelectorAll('li.active');
    
  activetab[0].classList.remove('active')
  
    tab.classList.add('active'); 
  }
  
}

body {
    padding:20px;
    font-family:sans-serif;    
}

ul {
    margin:20px 0;
    list-style:none;
}

li {
    background:#dfdfdf;
    padding:10px;
    margin:6px 0;
    cursor:pointer;
}

li.active {
    background:#2794c7;
    font-weight:bold;
    color:#ffffff;
}

<i>Please click an item:</i>

<ul class="menu">
  <li class="active"><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>

function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

с помощью принятого ответа выше здесь простая кросс-браузерная функция для добавления и удаления класса

добавить класс:

classed(document.getElementById("denis"), "active", true)

удалить класс:

classed(document.getElementById("denis"), "active", false)

Много ответов, много хороших ответов.

TL; DR:

document.getElementById('id').className = 'class'

ИЛИ

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

Вот и все.

И, если вы действительно хотите знать причину и обучать себя, тогда я предлагаю прочитать ответ Питера Боутона , он идеален.

Примечание:
это возможно с ( документ или событие ):

• getElementById()
• getElementsByClassName()
• querySelector()
• querySelectorAll()

В javascript есть свойство className для изменения имени класса HTML-элемента. Существующее значение класса будет заменено новым значением, назначенным в className.

<!DOCTYPE html>
<html>
<head>
<title>How to change class of an HTML element in Javascript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class=document.getElementById("change-class");
change_class.onclick=function()
{
    var icon=document.getElementById("icon");
    icon.className="fa fa-gear";
}

</script>
</body>
</html>

Кредит - https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html

Вопрос ОП был: Как я могу изменить класс элемента с помощью JavaScript?

Современные браузеры позволяют вам делать это с одной строкой javascript :

document.getElementById('id').classList.replace('span1','span2')

classListАтрибут обеспечивает DOMTokenList , который имеет различные методы . Вы можете работать с classList элемента, используя простые манипуляции, такие как add () , remove () или replace () . Или получить очень сложные и манипулировать классами, как вы бы объект или карту с ключами () , значения () , записи ()

Ответ Питера Боутона - отличный, но ему уже более десяти лет. Все современные браузеры теперь поддерживают DOMTokenList - см. Https://caniuse.com/#search=classList. и даже IE11 поддерживает некоторые методы DOMTokenList

пытаться

element.className='second'

function change(box) { box.className='second' }

.first  { width:  70px; height:  70px; background: #ff0                 }
.second { width: 150px; height: 150px; background: #f00; transition: 1s }

<div onclick="change(this)" class="first">Click me</div>

Рабочий код JavaScript:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

Вы можете скачать рабочий код по этой ссылке .

Вот простой код JQuery для этого.

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

Вот,

• Class1 является слушателем события.
• Родительский класс - это класс, в котором находится класс, который вы хотите изменить.
• Classtoremove - это старый класс, который у вас есть.
• Класс для добавления - это новый класс, который вы хотите добавить.
• 100 - задержка тайм-аута, в течение которой изменяется класс.

Удачи.