Dựa vào hàm setAttribute trong bài trước thì chúng ta hoàn toàn có thể thêm css cho thẻ HTML, nhưng trong javascript còn hỗ trợ chúng ta một cách CSS chuyên nghiệp hơn nữa.

1, Cú Pháp.

-Để CSS cho các thẻ HTMl bằng javascript các bạn dùng cú pháp:

element.style.propertyName = value;

Trong đó:

• element là các đối tượng HTML (được gọi bằng các phương thức getElement...).
• propertyName là tên thuộc tính CSS các bạn muốn xét.
• value là giá trị của thuộc tính đó.

-Và để lấy ra giá trị của thuộc tính css các bạn sử dụng cú pháp:

element.style.propertyName;

Trong đó:

• element là các đối tượng HTML (được gọi bằng các phương thức getElement...).
• propertyName là tên thuộc tính CSS các bạn muốn lấy.

2, Ví Dụ.

VD1: Mình sẽ xét color=red cho thẻ HTML có id=series.

    
    
    



    
Các series học lập trình tại toidicode.com
    

        
Học HTML
        
Học CSS
        
Học javascript
        
Học jquery
    
    
    

Xem Kết Quả

VD2: Lấy ra giá trị của thuộc tính css.

    
    
    



    
Các series học lập trình tại toidicode.com
    

        
Học HTML
        
Học CSS
        
Học javascript
        
Học jquery
    
    
    

Xem Kết Quả

3, Chú ý.

-Đối với các thuộc tính có dấu gạch nối ngăn ở giữa như: margin-top, margin-bottom,... Các bạn chuyển về dạng viết liền theo chuẩn lưng lạc đà.

VD:

• margin-top thành marginTop
• background-color thành backgroundColor
• ......

3, Lời kết.

-Như vậy phần này mình đã giới thiệu xong đến mọi người về DOM CSS trong javascript rồi. Tuy nhiên javascript còn hỗ trợ chúng ta rất nhiều cách khác có thể css được các thẻ HTML.

Đối tượng HTML DOM sở hữu toàn bộ các đối tượng khác trong trang web. Trong bài viết này, chúng ta sẽ tìm hiểu về các thao tác với phần tử HTML

---

Đối tượng document trong HTML DOM

Đối tượng document đại diện cho toàn bộ trang web.

Nếu muốn truy xuất bất kì thành phần nào trong trang HTML, chúng ta phải sử dụng đến đối tượng “document”.

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

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

8 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

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

9 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

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

8. Để 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 addClass() {
  let ele = document.getElementById('logo');
  /* thêm class*/
  ele.classList.add('title');
}

2

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

  Niem Vui Lap Trinh

1 để 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 addClass() {
  let ele = document.getElementById('logo');
  /* thêm class*/
  ele.classList.add('title');
}

4

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

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

5

CSS

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

6

Javascript

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

7

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