Hướng dẫn xoá class javascript

Ngày hôm nay mình và bạn sẽ cùng nhau đi vào tìm hiểu cách thêm, sửa, kiểm tra hay xoá class cho phần tử HTMl thông qua Javascript nhé.

Change Class Element Javascript

Class được xem là cách thông dụng giúp bạn có thể thiết lập style cho các phần tử trong trang HTML. Điểm đặc biệt của class trong CSS là chúng ta có thể dùng cho nhiều phần tử trong trang web. Trong phần này mình sẽ giới thiệu đến bạn các cách để tương tác với class bằng javascript nha.

Cách Add Class Javascript Bằng classList

Sau đây mình sẽ đi vào ví dụ thêm class vào trong phần tử HTML bằng add() method trong classList nha.

HTML

  Niem Vui Lap Trinh

Javascript

function addClass() {
  let ele = document.getElementById('logo');
  /* thêm class*/
  ele.classList.add('title');
}

Bạn có thể xem kết quả dưới đây nha.

See the Pen add class js by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu như bạn muốn thêm nhiều class cùng một lúc cho phần tử trong website thì chúng ta có thể thực hiện như cách sau đây nha:

HTML

  Niem Vui Lap Trinh

Javascript

function addMultipleClass() {
  let element = document.getElementById('logo');
  /* thêm multiple class */
  element.classList.add('title', 'color', 'background');
}
addMultipleClass();

Và kết quả bạn xem dưới đây nha:

See the Pen addMultipleClass js by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Add Class Javascript Bằng className

Trong phần này chúng ta sẽ sử dụng thuộc tính classNam để thêm class vào element nha.

Javascript

function addClass() {
  let element = document.getElementById('logo');
  /* thêm class bằng className */
  element.className = 'title';
}
addClass();

Ngoài ra bạn cũng có thể add multiple class cho element bằng className như đoạn code dưới đây:

Javascript

function addMultipleClass() {
  let element = document.getElementById('logo');
  /*thêm nhièu class bằng className*/
  element.className += ' title color background';
}
addMultipleClass();

Cách Remove Class JS

Trong phần này chúng ta sẽ đi sử dụng thuộc tính classList trong JS để xoá class cho phần tử HTML thông qua đoạn code dưới đây nha.

HTML

  Niem Vui Lap Trinh

CSS

.title{
  color:blue;
}
.background{
  background: purple;
}

Javascript

function removeClass() {
  let element = document.getElementById('logo');
  /* xoá class  title*/
  element.classList.remove('title');
}
removeClass();

Và kết quả bạn xem dự án Codepen pên dưới nha.

See the Pen add class by classNamejs by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ngoài ra bạn có thể xoá class cho phần tử HTML thông qua việc sử dụng className như đoạn code dưới đây:

Javascript

function removeClass() {
  let element = document.getElementById('logo');
  /* xoá class  title*/
   element.className = element.className.replace('title', '');
}
removeClass();

Cách Remove Multiple Class JS

Trong phàn này chúng ta sẽ đi vào tìm hiểu cách để xoá nhiều class cùng một lúc bằng thuộc tính classList. Để hiẻu rõ hơn bạn xem đoạn code sau nha:

HTML

  Niem Vui Lap Trinh

CSS

.title{
  color:blue;
}
.background{
  background: purple;
}

Javascript

function removeMultipleClass() {
  let element = document.getElementById('logo');
  /* xoá nhiều class cùng một lúc*/
  element.classList.remove('title', 'background');
}
removeMultipleClass();

Và kết quả bạn xem Codepen ben dưới nha:

See the Pen removeMultipleClass js by haycuoilennao19 (@haycuoilennao19) on CodePen.

Kiểm Tra Element Có Chứa Class Không?

Trong phần này chúng ta sẽ đi vào sử dụng thuộc tính classList.contains() để kiểm tra phần tử có chứa class hay không. Để hiểu rõ hơn bạn xem đoạn code sau nha:

HTML

  Niem Vui Lap Trinh

Javascript

function checkClass() {
  let element = document.getElementById('logo');
  /* check class*/
   if(element.classList.contains('title')) {
      console.log('Tồn tại class');
  } else{
      console.log('Không Tồn tại class');
  }
}
checkClass(); //Tồn tại class

Và kết quả bạn xem ở dưới đây nha.

See the Pen Untitled by haycuoilennao19 (@haycuoilennao19) on CodePen.

Sử Dụng Toggle Class

Phần cuối cùng chúng ta sẽ đi vào tìm hiểu cách để chuyển đổi giữa hai

HTML

  Niem Vui Lap Trinh

Toggle Class

CSS

.title {
  color: blue;
}

Javascript

function toggleClass() {
  var element = document.getElementById("logo");
  element.classList.toggle("title");
}

Và kết quả bạn xem dự án trên Codepen bên dưới nha.

See the Pen toggleClass in js by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách để thay đổi class bằng JS cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!