Проще всего это сделать с такой библиотекой, как jQuery:

<input type = "button" onClick = "javascript:test_byid();" value = "id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

Без обид, но неразумно менять класс на лету, поскольку это заставляет интерпретатор CSS пересчитывать визуальное представление всей веб-страницы.

Причина в том, что интерпретатору CSS практически невозможно узнать, можно ли изменить какое-либо наследование или каскадирование, поэтому краткий ответ:

Никогда не меняйте className на лету! -)

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

function highlight(elm){
    elm.style.backgroundColor  = "#345";
    elm.style.color = "#fff";
}

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

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

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

Современные методы 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 the end of the string or space)

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

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

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

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

Хотя можно писать 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>

_{(It is not required to have this code in script tags, this is simply for the brevity of example, and including the JavaScript in a distinct file may be more appropriate.)}

Второй шаг - переместить событие 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');

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

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

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

Линия

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

должно быть:

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

Измените класс 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, я создал следующие функции для добавления, удаления и проверки наличия у элемента класса:

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.

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

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

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

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

Используя чистый код 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);
    }
}

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

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];

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

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

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

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

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

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

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

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

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, ' ') + "]");

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

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

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

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

Спасибо

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

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")' >

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

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');
}

Вот демонстрация.

Я использую в своем коде следующие ванильные функции 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 в современных браузерах.

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

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

Здесь,

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

Удачи.

Просто подумал, что брошу это:

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(' ');
}

Вот 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 с поддержкой 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>

Рабочий код 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>

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

просто скажите 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:

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

const el = document.getElementById("main");
console.info(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>

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

TL;DR :

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

ИЛИ ЖЕ

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

Вот и все.

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

Примечание:
Это возможно с (документ или мероприятие):

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

пытаться

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>

ВАРИАНТЫ.

Вот несколько примеров стиля и списка классов, чтобы вы могли увидеть, какие варианты у вас есть, и как использовать 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 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)

В 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

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

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

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

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

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