Jak mogę zmienić klasę elementu HTML w odpowiedzi na onclickzdarzenie za pomocą JavaScript?

Nowoczesne techniki HTML5 do zmiany klas

Nowoczesne przeglądarki dodały classList, który zapewnia metody ułatwiające manipulowanie klasami bez potrzeby posiadania biblioteki:

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

Niestety, nie działają one w Internet Explorerze przed wersją 10, choć istnieje pewna zaleta, aby dodać obsługę dla IE8 i IE9, dostępnych z tej strony . Jest jednak coraz bardziej wspierany .

Proste rozwiązanie dla różnych przeglądarek

Wykorzystuje się standardowy sposób wybierania elementu w JavaScript document.getElementById("Id"), co wykorzystują poniższe przykłady - możesz oczywiście uzyskać elementy na inne sposoby, a we właściwej sytuacji możesz po prostu użyć this- jednak szczegółowe omówienie tego jest poza zakresem odpowiedzi.

Aby zmienić wszystkie klasy dla elementu:

Aby zastąpić wszystkie istniejące klasy jedną lub większą liczbą nowych klas, ustaw atrybut className:

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

(Możesz użyć listy rozdzielanej spacjami, aby zastosować wiele klas.)

Aby dodać dodatkową klasę do elementu:

Aby dodać klasę do elementu, nie usuwając / nie wpływając na istniejące wartości, dodaj spację i nową nazwę klasy, tak jak poniżej:

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

Aby usunąć klasę z elementu:

Aby usunąć pojedynczą klasę do elementu, bez wpływu na inne potencjalne klasy, wymagana jest prosta zamiana wyrażenia regularnego:

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

Wyjaśnienie tego wyrażenia regularnego jest następujące:

(?:^|\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)

gFlag opowiada zastąpić powtarzać w miarę potrzeby, w przypadku, gdy nazwa klasy zostało dodanych wiele razy.

Aby sprawdzić, czy klasa jest już zastosowana do elementu:

Ten sam regex użyty powyżej do usunięcia klasy może być również użyty jako sprawdzenie, czy istnieje konkretna klasa:

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

Przypisywanie tych akcji do zdarzeń onclick:

Chociaż możliwe jest pisanie JavaScript bezpośrednio w atrybutach zdarzeń HTML (takich jak onclick="this.className+=' MyClass'"), nie jest to zalecane zachowanie. Zwłaszcza w większych aplikacjach, łatwiejszy do utrzymania kod jest osiągnięty przez oddzielenie znaczników HTML od logiki interakcji JavaScript.

Pierwszym krokiem do osiągnięcia tego jest utworzenie funkcji i wywołanie funkcji w atrybucie onclick, na przykład:

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

_{(Nie jest wymagane umieszczanie tego kodu w znacznikach skryptu, służy to jedynie zwięzłości przykładu, a włączenie JavaScript w osobnym pliku może być bardziej odpowiednie).}

Drugim krokiem jest przeniesienie zdarzenia onclick z HTML i do JavaScript, na przykład za pomocą 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>

(Zauważ, że część window.onload jest wymagana, aby zawartość tej funkcji była wykonywana po zakończeniu ładowania HTML - bez tego MyElement może nie istnieć po wywołaniu kodu JavaScript, więc linia się nie powiedzie.)

Frameworky i biblioteki JavaScript

Powyższy kod jest w standardzie JavaScript, jednak powszechną praktyką jest użycie frameworka lub biblioteki w celu uproszczenia typowych zadań, a także skorzystanie ze naprawionych błędów i przypadków brzegowych, o których możesz nie pomyśleć podczas pisania kodu.

Chociaż niektórzy uważają, że przesadą jest dodanie frameworka o wielkości ~ 50 KB do zwykłej zmiany klasy, jeśli wykonujesz znaczną ilość pracy JavaScript lub coś, co może mieć nietypowe zachowanie w różnych przeglądarkach, warto to rozważyć.

(Z grubsza, biblioteka jest zestawem narzędzi zaprojektowanych do określonego zadania, podczas gdy framework zazwyczaj zawiera wiele bibliotek i wykonuje pełny zestaw obowiązków.)

Powyższe przykłady zostały odtworzone poniżej przy użyciu jQuery , prawdopodobnie najczęściej używanej biblioteki JavaScript (choć są też inne, które warto zbadać).

(Uwaga: $tutaj jest obiekt jQuery).

Zmiana klas za pomocą jQuery:

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

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

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

Ponadto jQuery zapewnia skrót do dodawania klasy, jeśli nie ma zastosowania, lub usuwania klasy, która:

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

Przypisywanie funkcji do zdarzenia click za pomocą jQuery:

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

lub bez potrzeby posiadania identyfikatora:

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

Możesz także po prostu:

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

Aby przełączyć klasę (usuń, jeśli istnieje, dodaj ją):

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

W jednym z moich starych projektów, które nie korzystały z jQuery, zbudowałem następujące funkcje 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, ' ');
    }
}

Na przykład, jeśli chcę onclickdodać 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>

Do tej pory na pewno lepiej byłoby użyć jQuery.

Możesz użyć node.classNametak:

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

Powinno to działać w IE5.5 i nowszych zgodnie z PPK .

Wow, zaskoczony, że jest tu tak wiele odpowiedzi na pytanie o przesadę ...

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

Używając 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");
}

Równie dobrze możesz 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 użyj tego w następujący sposób (kliknięcie doda lub usunie klasę):

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

Oto demo .

Aby dodać informacje z innego popularnego środowiska, Google Closures, zobacz ich klasę dom / 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.query z selektorem CSS3:

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

Kilka drobnych notatek i poprawek do poprzednich wyrażeń regularnych:

Będziesz chciał to zrobić globalnie, jeśli lista klas ma nazwę klasy więcej niż jeden raz. Prawdopodobnie będziesz chciał usunąć spacje z końców listy klas i przekonwertować wiele spacji na jedną spację, aby nie dopuścić do uruchomienia serii spacji. Żadna z tych rzeczy nie powinna stanowić problemu, jeśli jedyny kod migający z nazwami klas używa poniższego wyrażenia regularnego i usuwa nazwę przed jej dodaniem. Ale. Cóż, kto wie, kto może bawić się z listą nazw klas.

W wyrażeniu regularnym nie jest rozróżniana wielkość liter, więc błędy w nazwach klas mogą pojawiać się, zanim kod zostanie użyty 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

Chciałbym użyć jQuery i napisać coś takiego:

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

Ten kod dodaje funkcję, która ma być wywoływana po kliknięciu elementu id jakiś element . Funkcja dołącza kliknięcie do atrybutu klasy elementu, jeśli nie jest już jego częścią, i usuwa go, jeśli już tam jest.

Tak, aby dodać ten kod, musisz dodać odwołanie do biblioteki jQuery na swojej stronie, ale przynajmniej możesz mieć pewność, że większość funkcji w bibliotece będzie działać na prawie wszystkich współczesnych przeglądarkach, a to pozwoli zaoszczędzić czas na wdrożenie własny kod, aby zrobić to samo.

Dzięki

Linia

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

Powinien być:

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

Zmień klasę elementu w waniliowym JavaScript z obsługą IE6

Możesz spróbować użyć attributeswłaściwości węzła, aby zachować zgodność 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
}

Stosowanie:

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

widzieć jsfiddle

Zobacz także moją odpowiedź tutaj dotyczącą dynamicznego tworzenia nowej klasy

W kodzie używam następujących waniliowych funkcji JavaScript. Używają wyrażeń regularnych i indexOfnie 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żesz także użyć element.classList we współczesnych przeglądarkach.

OPCJE.

Oto kilka przykładów stylów w porównaniu z klasami, aby zobaczyć, jakie masz dostępne opcje i jak classListrobić, co chcesz.

style vs. classList

Różnica pomiędzy stylei classListjest to, że ze stylejesteś dodając do właściwości typu elementu, ale classListjest trochę kontrolowanie klasa (-y) elementu ( add, remove, toggle, contain), ja pokaże, jak używać addi removemetody, ponieważ są to popularne.

Przykład stylu

Jeśli chcesz dodać margin-topwłaściwość do elementu, wykonaj następujące czynności:

// 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 2 lekcje dodania elementu div już, class-ai class-b, i chcemy sterować Jakie klasy removei co do klasy add. To gdzieclassList staje się przydatny.

Usunąć 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")

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

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 zachować inne istniejące klasy, w którym to przypadku możesz użyć classList.add, .removemetod.

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 powinieneś użyć jQuery lub napisać własne metody w czystym javascript, preferuję dodawanie własnych metod zamiast wstrzykiwania całej 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 środowiska javascript, aby dodać kilka funkcji, które obsługują dodawanie klas, usuwanie klas itp. Podobnych do jQuery, jest to w pełni obsługiwane w IE9 +, również mój kod jest napisany w ES6, więc potrzebujesz aby upewnić się, że 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 za pomocą identyfikatora, co oznacza, że ​​element musi mieć identyfikator do wybrania:

//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 zadzwonić, użyj ich jak poniżej, wyobraź sobie, że twój element ma identyfikator „id” i klasę „class”, upewnij się, że przekazujesz je jako ciąg znaków, możesz użyć Utilities 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 classListDOM API. Ten interfejs API pozwala nam wybrać wszystkie klasy określonego elementu DOM w celu zmodyfikowania listy za pomocą javascript. Na przykład:

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

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

W dzienniku możemy zaobserwować, że zwracamy obiekt nie tylko klasami elementu, ale także wieloma pomocniczymi metodami i właściwościami. Ten obiekt dziedziczy z interfejsu DOMTokenList , interfejsu używanego w DOM do reprezentowania zestawu tokenów oddzielonych spacjami (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 to łatwo osiągnąć. Użyj tego kodu, aby przełączać 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 przyjętej powyżej odpowiedzi jest prostą funkcją przeglądarki, aby dodać i usunąć klasę

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

Otóż ​​to.

A jeśli naprawdę chcesz wiedzieć, dlaczego i kształcić się, proponuję przeczytać odpowiedź Petera Boughtona , jest idealna.

Uwaga:
Jest to możliwe w przypadku ( dokumentu lub zdarzenia ):

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

W javascript znajduje się właściwość className, która służy do zmiany nazwy klasy elementu HTML. Istniejąca wartość klasy zostanie zastąpiona nową, którą przypisałeś w 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>

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

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

Nowoczesne przeglądarki pozwalają to zrobić za pomocą jednej linii javascript :

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

classListAtrybut zapewnia DOMTokenList który ma różne metody . Możesz operować na klasie classList elementu, używając prostych manipulacji, takich jak add () , remove () lub replace () . Lub uzyskaj bardzo wyrafinowane i manipuluj klasami, tak jak w przypadku obiektu lub mapy za pomocą klawiszy () , wartości () , wpisów ()

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

próbować

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 tego linku .

Oto prosty kod jQuery, aby to zrobić.

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

Tutaj,

• Klasa 1 jest detektorem zdarzenia.
• Klasa nadrzędna to klasa, która obsługuje klasę, którą chcesz zmienić
• Classtoremove to stara klasa, którą masz.
• Klasa do dodania to nowa klasa, którą chcesz dodać.
• 100 to opóźnienie, podczas którego klasa jest zmieniana.

Powodzenia.