Możesz też po prostu zrobić:

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

I aby przełączyć klasę (usunąć, jeśli istnieje, dodać ją):

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

W jednym z moich starych projektów, które nie używały jQuery, zbudowałem następujące funkcje do dodawania, usuwania i sprawdzania, czy element ma klasę:

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

Więc, na przykład, jeśli chcę onclick dodać jakąś klasę do przycisku mogę użyć tego:

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

Teraz na pewno lepiej byłoby użyć jQuery.

Możesz użyć node.className w ten sposób:

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

Powinno działać w IE5. 5 i w górę zgodnie z PPK .

Dziwi mnie, że jest tu tyle przesadnych odpowiedzi...

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

Użycie czystego kodu 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);
    }
}

To działa dla mnie:

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

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

Można również rozszerzyć obiekt HTMLElement, aby dodać metody dodawania, usuwania, przełączania i sprawdzania klas (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);
}

A następnie po prostu użyj w ten sposób (po kliknięciu dodasz lub usuniesz klasę):

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

Oto demo .

Aby dodać informacje z innego popularnego frameworka, Google, zobacz ich dom / classes class:

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

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

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

Jedną z opcji wyboru elementu jest użycie goog.dom.zapytanie z selektorem CSS3:

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

Kilka drobnych uwag i poprawek w poprzednich wyrażeniach regularnych:

Będziesz chciał zrobić to globalnie, jeśli lista klas ma nazwę klasy więcej niż raz. Prawdopodobnie będziesz chciał usunąć spacje z końców listy klas i przekonwertować wiele spacji na jedną spację, aby nie uzyskiwać ciągów spacji. Żadna z tych rzeczy nie powinna być problemem, jeśli jedyny kod dinking z nazwami klas używa regex poniżej i usuwa nazwę przed dodaniem jej. Ale. Kto wie, kto może być / align = "left" /

Ten regex jest niewrażliwy na wielkość liter, więc błędy w nazwach klas mogą pojawić się przed użyciem kodu w przeglądarce, która nie dba o wielkość liter w nazwach klas.

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

Zmień klasę CSS elementu za pomocą JavaScript w 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

Użyłbym jQuery i napisałbym coś takiego:

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

Ten kod dodaje funkcję, która zostanie wywołana, gdy element o id jakiś element zostanie kliknięty. Funkcja dodaje clicked do atrybutu klasy elementu, jeśli nie jest on już jego częścią, i usuwa go, jeśli tam jest.

Tak, musisz dodać odniesienie do biblioteki jQuery na swojej stronie, aby użyć tego kodu, ale przynajmniej możesz mieć pewność, że większość funkcji w bibliotece będzie działać na pretty wiele nowoczesnych przeglądarek, a to pozwoli Ci zaoszczędzić czas implementacji własnego kodu, aby zrobić to samo.

Thanks

Linia

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

Powinno być:

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

Zmiana klasy elementu w vanilla JavaScript z obsługą IE6

Możesz spróbować użyć właściwości node attributes, Aby zachować kompatybilność ze starymi przeglądarkami nawet 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>

Oto moja wersja, w pełni działająca:

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
}

Użycie:

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

Oto toggleClass do przełączania/dodawania / usuwania klasy na elemencie:

// 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;
}

Zobacz jsfiddle

Zobacz także moją odpowiedź tutaj aby utworzyć nową klasę dynamicznie

Używam następujących funkcji JavaScript w moim kodzie. Używają wyrażeń regularnych i indexOf, ale nie wymagają cytowania znaków specjalnych w wyrażeniach regularnych.

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, "");
    }
}

Można również użyć elementu .classList w nowoczesnych przeglądarkach.

OPCJE.

Oto kilka przykładów stylu i listy klas, dzięki którym dowiesz się, jakie masz dostępne opcje i jak używać classList do robienia tego, co chcesz.

style vs.classList

Różnica między style i classList jest taka, że z style dodajesz do właściwości stylu elementu, ale {[3] } jest rodzajem kontrolowania Klasy(klas) elementu (add, remove, toggle, contain), pokażę Ci jak używać add i remove metoda, ponieważ te są popularne.

Przykład Stylu

Jeśli chcesz dodać margin-top właściwość do elementu, wykonaj w taki sposób:

// 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.

Przykład ClassList

Powiedzmy, że mamy <div class="class-a class-b">, w tym przypadku mamy już 2 klasy dodane do naszego elementu div, class-a i class-b, i chcemy kontrolować, jakie klasy remove A jaka Klasa do add. To tutaj classList staje się przydatne.

Usuń class-b

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

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

Dodaj class-c

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

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

Pytanie OP brzmiało Jak mogę zmienić klasę elementu za pomocą JavaScript?

Nowoczesne przeglądarki pozwalają na to z jednym wierszem javascript:

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

Atrybut classList dostarcza DOMTokenList, który ma różne metody. Możesz operować na liście klas elementu za pomocą prostych manipulacji, takich jak add(), remove () lub replace () . Lub uzyskać bardzo wyrafinowane i manipulować klasami, jak byś obiekt lub Mapa za pomocą klawiszy (), wartości(), wpisy()

Odpowiedź Petera Boughtona jest świetna, ale ma już ponad dekadę. Wszystkie nowoczesne przeglądarki obsługują teraz DOMTokenList-zobacz https://caniuse.com/#search=classList i nawet IE11 obsługuje niektóre metody DOMTokenList

Pomyślałem, że to wrzucę:

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

Po Prostu powiedz myElement.classList="new-class", chyba że musisz utrzymywać inne istniejące klasy, w którym to przypadku możesz użyć metod 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>

OK, myślę, że w tym przypadku należy użyć jQuery lub napisać własne metody w czystym javascript, moje preferencje jest dodawanie własnych metod zamiast wstrzykiwania wszystkich jQuery do mojej aplikacji, Jeśli nie potrzebuję tego z innych powodów.

Chciałbym zrobić coś takiego jak poniżej jako metody do mojego frameworka javascript, aby dodać kilka funkcjonalności, które obsługują dodawanie klas, usuwanie klas, itp podobne do jQuery, jest to w pełni obsługiwane w IE9+, również mój kod jest napisany w ES6, więc musisz zrobić oczywiście twoja przeglądarka go obsługuje lub używasz czegoś takiego jak babel, w przeciwnym razie musisz użyć składni ES5 w kodzie, również w ten sposób znajdujemy element poprzez ID, co oznacza, że element musi mieć ID do wyboru:

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

}

I możesz po prostu wywołać użyj ich jak poniżej, wyobraź sobie, że twój element ma id ' id 'i klasę 'class', upewnij się, że przekazujesz je jako ciąg znaków, możesz użyć util jak poniżej:

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

classList DOM API:

Bardzo wygodnym sposobem dodawania i usuwania klas jest classList DOM API. Ten API pozwala nam wybrać wszystkie klasy określonego elementu DOM w celu modyfikacji listy za pomocą javascript. Na przykład:

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

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

Możemy zaobserwować w logu, że odzyskujemy obiekt z nie tylko klasami elementu, ale także wieloma pomocniczymi metodami i właściwościami. Obiekt ten dziedziczy z interfejsu DOMTokenList , interfejs, który jest używany w DOM do reprezentowania zestawu oddzielonych spacjami tokenów (takich jak Klasy).

Przykład:

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>
  

Tak, jest na to wiele sposobów. W składni ES6 możemy łatwo osiągnąć. Użyj tego kodu Przełącz dodawanie i usuwanie klasy.

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

Użycie zaakceptowanej odpowiedzi powyżej jest prostą funkcją między przeglądarkami do dodawania i usuwania klasy

Dodaj klasę:

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

Usuń klasę:

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

Wiele odpowiedzi, wiele dobrych odpowiedzi.

TL; DR:

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

lub

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

to wszystko.

Uwaga:
Jest to możliwe dzięki (dokument lub wydarzenie):

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

Istnieje właściwość className w javascript, aby zmienić nazwę klasy elementu HTML. Istniejąca wartość klasy zostanie zastąpiona nową, którą przypisałeś w nazwie klasy.

<!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>

Kredyt - https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html

Spróbuj

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>

Działający kod 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>

Możesz pobrać działający kod z pod tym linkiem .

Oto prosty kod jQuery, aby to zrobić.

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

Tutaj,

• Class1 jest słuchaczem wydarzenia.
• Klasa nadrzędna jest klasą, która jest gospodarzem klasy, którą chcesz zmienić
Classtoremove to twoja stara Klasa.
• Class to add to nowa klasa, którą chcesz dodać.
• 100 to opóźnienie czasowe, podczas którego klasa jest zmieniana.