Bagaimana saya bisa mengubah kelas elemen HTML dalam menanggapi suatu onclickperistiwa menggunakan JavaScript?

Teknik HTML5 modern untuk mengubah kelas

Browser modern telah menambahkan classList yang menyediakan metode untuk membuatnya lebih mudah untuk memanipulasi kelas tanpa perlu perpustakaan:

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

Sayangnya, ini tidak berfungsi di Internet Explorer sebelum v10, meskipun ada shim untuk menambahkan dukungan untuk itu ke IE8 dan IE9, tersedia dari halaman ini . Namun, semakin banyak didukung .

Solusi lintas-browser sederhana

Cara standar JavaScript untuk memilih elemen menggunakan document.getElementById("Id"), yang digunakan contoh-contoh berikut - Anda tentu saja dapat memperoleh elemen dengan cara lain, dan dalam situasi yang tepat dapat menggunakan thissaja - namun, memerinci hal ini berada di luar cakupan jawabannya.

Untuk mengubah semua kelas untuk suatu elemen:

Untuk mengganti semua kelas yang ada dengan satu atau lebih kelas baru, setel atribut className:

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

(Anda dapat menggunakan daftar yang dibatasi ruang untuk menerapkan beberapa kelas.)

Untuk menambahkan kelas tambahan ke elemen:

Untuk menambahkan kelas ke elemen, tanpa menghapus / memengaruhi nilai yang ada, tambahkan spasi dan nama kelas baru, seperti:

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

Untuk menghapus kelas dari suatu elemen:

Untuk menghapus satu kelas ke suatu elemen, tanpa mempengaruhi kelas potensial lainnya, diperlukan penggantian regex sederhana:

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

Penjelasan dari regex ini adalah sebagai berikut:

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

Itu g bendera menceritakan ganti untuk mengulang seperti yang diperlukan, dalam hal nama kelas telah ditambahkan beberapa kali.

Untuk memeriksa apakah kelas sudah diterapkan ke elemen:

Regex yang sama yang digunakan di atas untuk menghapus kelas juga dapat digunakan sebagai pemeriksaan apakah kelas tertentu ada:

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

Menetapkan tindakan ini untuk mengeklik acara:

Meskipun dimungkinkan untuk menulis JavaScript langsung di dalam atribut acara HTML (seperti onclick="this.className+=' MyClass'" ), ini bukan perilaku yang disarankan. Terutama pada aplikasi yang lebih besar, kode yang lebih dapat dikelola dicapai dengan memisahkan markup HTML dari logika interaksi JavaScript.

Langkah pertama untuk mencapai ini adalah dengan membuat fungsi, dan memanggil fungsi di atribut onclick, misalnya:

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

_{(Tidak perlu memiliki kode ini dalam tag skrip, ini hanya untuk singkatnya contoh, dan termasuk JavaScript dalam file yang berbeda mungkin lebih tepat.)}

Langkah kedua adalah memindahkan acara onclick dari HTML dan ke JavaScript, misalnya menggunakan 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>

(Perhatikan bahwa bagian window.onload diperlukan agar konten fungsi tersebut dieksekusi setelah HTML selesai memuat - tanpa ini, MyElement mungkin tidak ada ketika kode JavaScript dipanggil, sehingga baris akan gagal.)

Kerangka dan Perpustakaan JavaScript

Kode di atas semuanya dalam JavaScript standar, namun itu adalah praktik umum untuk menggunakan kerangka kerja atau pustaka untuk menyederhanakan tugas-tugas umum, serta mendapat manfaat dari bug tetap dan kasus tepi yang mungkin tidak Anda pikirkan ketika menulis kode Anda.

Sementara beberapa orang menganggap itu berlebihan untuk menambahkan kerangka ~ 50 KB hanya untuk mengubah kelas, jika Anda melakukan sejumlah besar pekerjaan JavaScript, atau apa pun yang mungkin memiliki perilaku lintas-browser yang tidak biasa, ada baiknya mempertimbangkan.

(Secara kasar, perpustakaan adalah seperangkat alat yang dirancang untuk tugas tertentu, sementara kerangka kerja umumnya berisi beberapa perpustakaan dan melakukan serangkaian tugas lengkap.)

Contoh di atas telah direproduksi di bawah ini menggunakan jQuery , mungkin pustaka JavaScript yang paling umum digunakan (meskipun ada juga yang layak diselidiki).

(Perhatikan bahwa di $sini adalah objek jQuery.)

Mengubah Kelas dengan jQuery:

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

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

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

Selain itu, jQuery menyediakan pintasan untuk menambahkan kelas jika tidak berlaku, atau menghapus kelas yang:

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

Menetapkan fungsi ke acara klik dengan jQuery:

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

atau, tanpa perlu id:

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

Anda juga bisa melakukan:

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

Dan untuk beralih kelas (hapus jika ada yang lain tambahkan):

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

Di salah satu proyek lama saya yang tidak menggunakan jQuery, saya membangun fungsi berikut untuk menambah, menghapus, dan memeriksa apakah elemen memiliki kelas:

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

Jadi, misalnya, jika saya ingin onclickmenambahkan beberapa kelas ke tombol saya dapat menggunakan ini:

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

Sekarang pasti akan lebih baik menggunakan jQuery.

Anda dapat menggunakan node.classNameseperti ini:

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

Ini harus bekerja di IE5.5 dan lebih tinggi sesuai dengan PPK .

Wow, terkejut ada begitu banyak jawaban berlebihan di sini ...

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

Menggunakan kode JavaScript murni:

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

Ini bekerja untuk saya:

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

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

Anda juga dapat memperluas objek HTMLElement, untuk menambahkan metode untuk menambah, menghapus, beralih dan memeriksa kelas ( inti ):

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

Dan kemudian gunakan seperti ini (klik akan menambah atau menghapus kelas):

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

Ini demo .

Hanya untuk menambahkan informasi dari kerangka kerja populer lainnya, Google Closures, lihat kelas dom / kelas mereka:

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

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

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

Salah satu opsi untuk memilih elemen menggunakan goog.dom.query dengan pemilih CSS3:

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

Beberapa catatan kecil dan perubahan pada regex sebelumnya:

Anda akan ingin melakukannya secara global jika daftar kelas memiliki nama kelas lebih dari sekali. Dan, Anda mungkin ingin menghapus spasi dari ujung daftar kelas dan mengonversi beberapa ruang menjadi satu ruang agar tidak mendapatkan ruang berlari. Tak satu pun dari hal-hal ini akan menjadi masalah jika satu-satunya kode yang bertele-tele dengan nama kelas menggunakan regex di bawah ini dan menghapus nama sebelum menambahkannya. Tapi. Nah, siapa yang tahu siapa yang mungkin berkutat dengan daftar nama kelas.

Regex ini tidak peka terhadap huruf besar-kecil sehingga bug dalam nama kelas dapat muncul sebelum kode digunakan pada browser yang tidak peduli dengan huruf besar-kecil dalam nama kelas.

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

Ubah kelas CSS elemen dengan JavaScript di 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

Saya akan menggunakan jQuery dan menulis sesuatu seperti ini:

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

Kode ini menambahkan fungsi untuk dipanggil ketika elemen id -elemen diklik. Fungsi menambahkan klik ke atribut kelas elemen jika itu belum menjadi bagian dari itu, dan menghapusnya jika ada di sana.

Ya, Anda perlu menambahkan referensi ke pustaka jQuery di halaman Anda untuk menggunakan kode ini, tetapi setidaknya Anda bisa merasa yakin sebagian besar fungsi di pustaka akan bekerja pada hampir semua browser modern, dan itu akan menghemat waktu Anda menerapkan kode Anda sendiri untuk melakukan hal yang sama.

Terima kasih

Garis

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

seharusnya:

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

Ubah kelas elemen dalam JavaScript vanilla dengan dukungan IE6

Anda dapat mencoba menggunakan attributesproperti node untuk menjaga kompatibilitas dengan browser lama bahkan 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>

Ini versi saya, berfungsi penuh:

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
}

Pemakaian:

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

Berikut ini adalah toggleClass untuk beralih / menambah / menghapus kelas pada suatu elemen:

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

Lihat jsfiddle

lihat juga jawaban saya di sini untuk membuat kelas baru secara dinamis

Saya menggunakan fungsi JavaScript vanilla berikut dalam kode saya. Mereka menggunakan ekspresi reguler dan indexOftetapi tidak perlu mengutip karakter khusus dalam ekspresi reguler.

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

Anda juga dapat menggunakan element.classList di browser modern.

PILIHAN.

Berikut adalah sedikit contoh style vs. classList untuk membuat Anda melihat apa saja pilihan yang tersedia dan cara menggunakannya classListuntuk melakukan apa yang Anda inginkan.

style vs. classList

Perbedaan antara styledan classListadalah bahwa dengan styleAnda menambah sifat-sifat gaya elemen, tapi classListini agak mengendalikan kelas (es) dari elemen ( add, remove, toggle, contain), saya akan menunjukkan bagaimana menggunakan adddan removemetode karena mereka adalah yang populer.

Contoh Gaya

Jika Anda ingin menambahkan margin-topproperti ke dalam elemen, Anda dapat melakukannya di:

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

Contoh classList

Katakanlah kita memiliki <div class="class-a class-b">, dalam hal ini, kita sudah memiliki 2 kelas yang ditambahkan ke elemen div kita, class-adan class-b, dan kita ingin mengendalikan kelas removeapa dan kelas apa yang ingin kita ikuti add. Di sinilahclassList menjadi berguna.

Menghapus class-b

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

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

Menambahkan class-c

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

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

Hanya berpikir saya akan memasukkan ini:

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

katakan saja myElement.classList="new-class"kecuali Anda perlu mempertahankan kelas lain yang ada dalam hal ini Anda dapat menggunakan classList.add, .removemetode.

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, saya pikir dalam hal ini Anda harus menggunakan jQuery atau menulis Metode Anda sendiri dalam javascript murni, preferensi saya adalah menambahkan metode saya sendiri daripada menyuntikkan semua jQuery ke aplikasi saya jika saya tidak membutuhkannya karena alasan lain.

Saya ingin melakukan sesuatu seperti di bawah ini sebagai metode kerangka kerja javascript saya untuk menambahkan beberapa fungsi yang menangani penambahan kelas, menghapus kelas, dll mirip dengan jQuery, ini didukung penuh di IE9 +, juga kode saya ditulis dalam ES6, jadi Anda perlu untuk memastikan browser Anda mendukungnya atau Anda menggunakan sesuatu seperti babel, jika tidak perlu menggunakan sintaks ES5 dalam kode Anda, juga dengan cara ini, kami menemukan elemen melalui ID, yang berarti elemen perlu memiliki ID yang akan dipilih:

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

}

dan Anda dapat memanggil menggunakannya seperti di bawah ini, bayangkan elemen Anda memiliki id 'id' dan kelas 'kelas', pastikan Anda meneruskannya sebagai string, Anda dapat menggunakan util seperti di bawah ini:

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

classList API DOM:

Cara yang sangat mudah untuk menambah dan menghapus kelas adalah classListDOM API. API ini memungkinkan kami untuk memilih semua kelas elemen DOM tertentu untuk mengubah daftar menggunakan javascript. Sebagai contoh:

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

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

Kita dapat mengamati dalam log bahwa kita mendapatkan kembali suatu objek dengan tidak hanya kelas-kelas elemen, tetapi juga banyak metode dan properti bantu. Objek ini mewarisi dari antarmuka DOMTokenList , antarmuka yang digunakan dalam DOM untuk mewakili satu set token yang dipisahkan ruang (seperti kelas).

Contoh:

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>
  

Ya ada banyak cara untuk melakukan ini. Dalam sintaks ES6 kita dapat mencapai dengan mudah. Gunakan kode ini untuk menambahkan dan menghapus kelas.

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

menggunakan jawaban yang diterima di atas di sini adalah fungsi lintas-browser sederhana untuk menambah dan menghapus kelas

tambahkan kelas:

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

hapus kelas:

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

Banyak jawaban, banyak jawaban bagus.

TL; DR:

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

ATAU

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

Itu dia.

Dan, jika Anda benar-benar ingin tahu mengapa dan mendidik diri sendiri maka saya sarankan membaca jawaban Peter Boughton , itu sempurna.

Catatan:
Ini dimungkinkan dengan ( dokumen atau acara ):

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

Ada className properti di javascript untuk mengubah nama kelas elemen HTML. Nilai kelas yang ada akan diganti dengan yang baru, yang telah Anda tetapkan di 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>

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

Pertanyaan OP adalah Bagaimana saya bisa mengubah kelas elemen dengan JavaScript?

Browser modern memungkinkan Anda melakukan ini dengan satu baris javascript :

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

The classListatribut menyediakan DOMTokenList yang memiliki berbagai metode . Anda dapat beroperasi pada classList elemen menggunakan manipulasi sederhana seperti add () , hapus () atau ganti () . Atau dapatkan sangat canggih dan memanipulasi kelas seperti Anda akan objek atau Peta dengan kunci () , nilai () , entri ()

Jawaban Peter Boughton adalah jawaban yang bagus tetapi sekarang sudah lebih dari satu dekade. Semua browser modern sekarang mendukung DOMTokenList - lihat https://caniuse.com/#search=classList dan bahkan IE11 mendukung beberapa metode DOMTokenList

mencoba

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>

Kode JavaScript yang berfungsi:

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

Anda dapat mengunduh kode yang berfungsi dari tautan ini .

Berikut adalah kode jQuery sederhana untuk melakukan itu.

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

Sini,

• Class1 adalah pendengar acara.
• Kelas induk adalah kelas yang menampung kelas yang ingin Anda ubah
• Classtoremove adalah kelas lama yang Anda miliki.
• Kelas yang akan ditambahkan adalah kelas baru yang ingin Anda tambahkan.
• 100 adalah waktu tunda selama kelas diubah.

Semoga berhasil.