Làm cách nào tôi có thể thay đổi một lớp của một phần tử HTML để phản hồi lại một onclicksự kiện bằng JavaScript?

Kỹ thuật HTML5 hiện đại để thay đổi lớp

Các trình duyệt hiện đại đã thêm classList cung cấp các phương thức để giúp thao tác các lớp dễ dàng hơn mà không cần thư viện:

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

Thật không may, những không làm việc trong Internet Explorer trước khi v10, mặc dù có một shim để hỗ trợ thêm cho nó để IE8 và IE9, có sẵn từ trang này . Đó là, mặc dù, ngày càng được hỗ trợ nhiều hơn .

Giải pháp trình duyệt chéo đơn giản

Cách JavaScript tiêu chuẩn để chọn một phần tử đang sử dụng document.getElementById("Id"), đó là cách mà các ví dụ sau sử dụng - tất nhiên bạn có thể có được các phần tử theo các cách khác và trong trường hợp phù hợp có thể chỉ cần sử dụng thisthay vào đó - tuy nhiên, đi sâu vào chi tiết về điều này nằm ngoài phạm vi của câu trả lời.

Để thay đổi tất cả các lớp cho một phần tử:

Để thay thế tất cả các lớp hiện có bằng một hoặc nhiều lớp mới, hãy đặt thuộc tính className:

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

(Bạn có thể sử dụng danh sách được phân tách bằng dấu cách để áp dụng nhiều lớp.)

Để thêm một lớp bổ sung cho một phần tử:

Để thêm một lớp vào một phần tử, mà không xóa / ảnh hưởng đến các giá trị hiện có, hãy thêm một khoảng trắng và tên lớp mới, như vậy:

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

Để xóa một lớp khỏi một phần tử:

Để loại bỏ một lớp duy nhất thành một phần tử, mà không ảnh hưởng đến các lớp tiềm năng khác, yêu cầu thay thế regex đơn giản:

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

Một lời giải thích về regex này như sau:

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

Các glá cờ kể về thay thế để lặp lại theo quy định, trong trường hợp tên lớp đã được thêm vào nhiều lần.

Để kiểm tra xem một lớp đã được áp dụng cho một phần tử chưa:

Regex tương tự được sử dụng ở trên để loại bỏ một lớp cũng có thể được sử dụng như một kiểm tra xem liệu một lớp cụ thể có tồn tại hay không:

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

Chỉ định các hành động này cho các sự kiện onclick:

Mặc dù có thể viết JavaScript trực tiếp bên trong các thuộc tính sự kiện HTML (chẳng hạn như onclick="this.className+=' MyClass'") đây không phải là hành vi được khuyến nghị. Đặc biệt trên các ứng dụng lớn hơn, mã có thể duy trì nhiều hơn đạt được bằng cách tách đánh dấu HTML khỏi logic tương tác JavaScript.

Bước đầu tiên để đạt được điều này là bằng cách tạo một hàm và gọi hàm trong thuộc tính onclick, ví dụ:

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

_{(Không bắt buộc phải có mã này trong các thẻ script, điều này chỉ đơn giản là để lấy ví dụ và bao gồm JavaScript trong một tệp riêng biệt có thể phù hợp hơn.)}

Bước thứ hai là chuyển sự kiện onclick ra khỏi HTML và vào JavaScript, ví dụ như sử dụng 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>

(Lưu ý rằng phần window.onload là bắt buộc để nội dung của hàm đó được thực thi sau khi HTML tải xong - nếu không có điều này, MyEuity có thể không tồn tại khi mã JavaScript được gọi, do đó dòng đó sẽ thất bại.)

Các khung và thư viện JavaScript

Đoạn mã trên hoàn toàn bằng JavaScript tiêu chuẩn, tuy nhiên, thông thường sử dụng khung hoặc thư viện để đơn giản hóa các tác vụ thông thường, cũng như hưởng lợi từ các lỗi cố định và các trường hợp cạnh mà bạn có thể không nghĩ đến khi viết mã.

Mặc dù một số người cho rằng việc bổ sung khung ~ 50 KB chỉ đơn giản là thay đổi một lớp, nếu bạn đang thực hiện bất kỳ công việc JavaScript đáng kể nào hoặc bất kỳ điều gì có thể có hành vi trình duyệt chéo bất thường, thì cũng đáng để xem xét.

(Rất đại khái, thư viện là một bộ công cụ được thiết kế cho một nhiệm vụ cụ thể, trong khi một khung thường chứa nhiều thư viện và thực hiện một bộ nhiệm vụ hoàn chỉnh.)

Các ví dụ ở trên đã được sao chép bên dưới bằng jQuery , có lẽ là thư viện JavaScript được sử dụng phổ biến nhất (mặc dù cũng có những thứ khác đáng để nghiên cứu).

(Lưu ý rằng $đây là đối tượng jQuery.)

Thay đổi các lớp với jQuery:

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

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

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

Ngoài ra, jQuery cung cấp một lối tắt để thêm một lớp nếu nó không áp dụng hoặc xóa một lớp có:

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

Gán một hàm cho một sự kiện nhấp chuột với jQuery:

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

hoặc, không cần id:

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

Bạn cũng có thể làm:

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

Và để chuyển đổi một lớp (loại bỏ nếu tồn tại khác thêm nó):

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

Trong một trong những dự án cũ của tôi không sử dụng jQuery, tôi đã xây dựng các hàm sau để thêm, xóa và kiểm tra xem phần tử có lớp không:

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

Vì vậy, ví dụ, nếu tôi muốn onclickthêm một số lớp vào nút, tôi có thể sử dụng điều này:

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

Bây giờ chắc chắn sẽ tốt hơn nếu sử dụng jQuery.

Bạn có thể sử dụng node.classNamenhư vậy:

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

Điều này sẽ hoạt động trong IE5.5 trở lên theo PPK .

Wow, ngạc nhiên khi có rất nhiều câu trả lời quá mức cần thiết ở đây ...

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

Sử dụng mã JavaScript thuần túy:

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

Điều này làm việc cho tôi:

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

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

Cũng như bạn có thể mở rộng đối tượng HTMLEuity, để thêm các phương thức để thêm, xóa, chuyển đổi và kiểm tra các lớp ( ý chính ):

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

Và sau đó chỉ cần sử dụng như thế này (khi nhấp vào sẽ thêm hoặc xóa lớp):

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

Đây là bản demo .

Chỉ cần thêm thông tin từ một khung công tác phổ biến khác, Google Closures, xem lớp dom / class của họ :

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

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

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

Một tùy chọn để chọn thành phần là sử dụng goog.dom.query với bộ chọn CSS3:

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

Một vài lưu ý nhỏ và điều chỉnh về các biểu thức chính trước đó:

Bạn sẽ muốn làm điều đó trên toàn cầu trong trường hợp danh sách lớp có tên lớp nhiều hơn một lần. Và, có lẽ bạn sẽ muốn tách các khoảng trắng từ cuối danh sách lớp và chuyển đổi nhiều khoảng trắng thành một khoảng trắng để tránh bị chạy các khoảng trắng. Không có vấn đề nào trong số những vấn đề này nếu mã duy nhất bị xóa với tên lớp sử dụng biểu thức chính quy bên dưới và xóa tên trước khi thêm nó. Nhưng. Chà, ai mà biết được ai có thể đang say sưa với danh sách tên lớp.

Regex này không phân biệt chữ hoa chữ thường để các lỗi trong tên lớp có thể xuất hiện trước khi mã được sử dụng trên trình duyệt không quan tâm đến trường hợp trong tên lớp.

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

Thay đổi lớp CSS của một phần tử bằng JavaScript trong 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

Tôi sẽ sử dụng jQuery và viết một cái gì đó như thế này:

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

Mã này thêm một chức năng được gọi khi một phần tử của id một số phần tử được nhấp. Hàm được nối thêm vào thuộc tính lớp của phần tử nếu nó chưa là một phần của nó và loại bỏ nó nếu nó ở đó.

Có, bạn cần phải thêm một tham chiếu đến thư viện jQuery trong trang của mình để sử dụng mã này, nhưng ít nhất bạn có thể cảm thấy tự tin rằng hầu hết các chức năng trong thư viện sẽ hoạt động trên hầu hết các trình duyệt hiện đại và nó sẽ giúp bạn tiết kiệm thời gian thực hiện mã của riêng bạn để làm như vậy.

Cảm ơn

Dòng

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

nên là:

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

Thay đổi lớp của một phần tử trong JavaScript vanilla với hỗ trợ IE6

Bạn có thể thử sử dụng thuộc tính nút attributesđể giữ khả năng tương thích với các trình duyệt cũ ngay cả 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>

Đây là phiên bản của tôi, hoạt động đầy đủ:

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
}

Sử dụng:

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

Đây là một toggleClass để chuyển / thêm / xóa một lớp trên một phần tử:

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

xem jsfiddle

cũng thấy câu trả lời của tôi ở đây để tạo một lớp mới một cách linh hoạt

Tôi sử dụng các hàm JavaScript vanilla sau đây trong mã của mình. Họ sử dụng các biểu thức thông thường và indexOfkhông yêu cầu trích dẫn các ký tự đặc biệt trong các biểu thức thông thường.

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

Bạn cũng có thể sử dụng Element. ClassList trong các trình duyệt hiện đại.

CÁC LỰA CHỌN.

Dưới đây là một chút phong cách so với các ví dụ classList để giúp bạn xem các tùy chọn bạn có sẵn là gì và cách sử dụng classListđể làm những gì bạn muốn.

style so với classList

Sự khác biệt giữa stylevà classListlà với stylebạn thêm vào các thuộc tính phong cách của nguyên tố này, nhưng classListlà kinda kiểm soát lớp (es) của nguyên tố này ( add, remove, toggle, contain), tôi sẽ cho bạn thấy làm thế nào để sử dụng addvà removephương pháp bởi vì đó là Những cái phổ biến.

Ví dụ về phong cách

Nếu bạn muốn thêm thuộc margin-toptính vào một phần tử, bạn sẽ làm như sau:

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

ví dụ classList

Để cho chúng ta có một <div class="class-a class-b">, trong trường hợp này, chúng tôi có 2 lớp học thêm vào phần tử div của chúng tôi đã có, class-avà class-b, và chúng tôi muốn kiểm soát những gì các lớp học removevà những gì lớp add. Đây là nơi classListtrở nên tiện dụng.

Tẩy class-b

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

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

Thêm vào class-c

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

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

Chỉ cần nghĩ rằng tôi sẽ ném cái này vào:

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

chỉ cần nói myElement.classList="new-class"trừ khi bạn cần duy trì các lớp hiện có khác trong trường hợp bạn có thể sử dụng các classList.add, .removephương thức.

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, tôi nghĩ trong trường hợp này bạn nên sử dụng jQuery hoặc viết Phương thức của riêng bạn bằng javascript thuần túy, sở thích của tôi là thêm các phương thức của riêng tôi thay vì tiêm tất cả jQuery vào ứng dụng của tôi nếu tôi không cần điều đó vì những lý do khác.

Tôi muốn làm một cái gì đó như dưới đây như các phương thức cho khung javascript của mình để thêm một số chức năng xử lý việc thêm các lớp, xóa các lớp, v.v. tương tự như jQuery, điều này được hỗ trợ đầy đủ trong IE9 +, cũng là mã của tôi được viết bằng ES6, vì vậy bạn cần để đảm bảo trình duyệt của bạn hỗ trợ nó hoặc bạn sử dụng một cái gì đó như babel, nếu không, cần sử dụng cú pháp ES5 trong mã của bạn, theo cách này, chúng tôi tìm phần tử qua ID, có nghĩa là phần tử cần phải có ID để được chọn:

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

}

và bạn có thể chỉ cần gọi sử dụng chúng như bên dưới, hãy tưởng tượng phần tử của bạn có id của 'id' và lớp của 'class', đảm bảo bạn chuyển chúng dưới dạng một chuỗi, bạn có thể sử dụng tiện ích như dưới đây:

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

classList API DOM:

Một cách rất thuận tiện để thêm và xóa các lớp là classListAPI DOM. API này cho phép chúng tôi chọn tất cả các lớp của một thành phần DOM cụ thể để sửa đổi danh sách bằng cách sử dụng javascript. Ví dụ:

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

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

Chúng ta có thể quan sát trong nhật ký rằng chúng ta đang lấy lại một đối tượng không chỉ với các lớp của phần tử, mà còn có nhiều phương thức và thuộc tính phụ trợ. Đối tượng này kế thừa từ giao diện DOMTokenList , một giao diện được sử dụng trong DOM để thể hiện một tập hợp các mã thông báo được phân tách không gian (như các lớp).

Thí dụ:

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>
  

Vâng, có nhiều cách để làm điều này. Trong cú pháp ES6 chúng ta có thể đạt được một cách dễ dàng. Sử dụng mã này để chuyển đổi thêm và loại bỏ lớp.

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

sử dụng câu trả lời được chấp nhận ở trên là một chức năng trình duyệt chéo đơn giản để thêm và xóa lớp

thêm lớp:

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

xóa lớp:

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

Rất nhiều câu trả lời, rất nhiều câu trả lời hay.

TL; DR:

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

HOẶC LÀ

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

Đó là nó.

Và, nếu bạn thực sự muốn biết lý do tại sao và giáo dục chính mình thì tôi khuyên bạn nên đọc câu trả lời của Peter Boughton , thật hoàn hảo.

Lưu ý:
Điều này có thể với ( tài liệu hoặc sự kiện ):

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

Có một thuộc tính className trong javascript để thay đổi tên của lớp của một thành phần HTML. Giá trị lớp hiện tại sẽ được thay thế bằng giá trị mới mà bạn đã gán trong 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>

Tín dụng - https://jaischool.com/javascript-lang/how-to-change-group-name-of-an-html-element-in-javascript.html

Câu hỏi OP là Làm thế nào tôi có thể thay đổi lớp của một phần tử bằng JavaScript?

Các trình duyệt hiện đại cho phép bạn làm điều này với một dòng javascript :

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

Các classListthuộc tính cung cấp một DOMTokenList trong đó có một loạt các phương pháp . Bạn có thể thao tác trên classList của một phần tử bằng các thao tác đơn giản như add () , remove () hoặc thay thế () . Hoặc có được các lớp rất tinh vi và thao túng như bạn sẽ làm một đối tượng hoặc Bản đồ với các khóa () , giá trị () , mục ()

Câu trả lời của Peter Boughton là một câu trả lời hay nhưng giờ đã hơn một thập kỷ. Tất cả các trình duyệt hiện đại hiện hỗ trợ DOMTokenList - xem https://caniuse.com/#search= classList và thậm chí IE11 hỗ trợ một số phương thức DOMTokenList

thử

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>

Mã JavaScript hoạt động:

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

Bạn có thể tải về một mã làm việc từ liên kết này .

Đây là mã jQuery đơn giản để làm điều đó.

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

Đây,

• Class1 là người nghe cho một sự kiện.
• Lớp cha là lớp lưu trữ lớp bạn muốn thay đổi
• Classtoremove là lớp cũ mà bạn có.
• Lớp cần thêm là lớp mới mà bạn muốn thêm.
• 100 là độ trễ thời gian chờ trong đó lớp được thay đổi.

Chúc may mắn.