Thay đổi thuộc tính css bằng 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é. Show Change Class Element JavascriptClass đượ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 classListSau đâ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
Javascript
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
Javascript
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 classNameTrong phần này chúng ta sẽ sử dụng thuộc tính classNam để thêm class vào element nha. Javascript
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
Cách Remove Class JSTrong phần này chúng ta sẽ đi sử dụng thuộc tính 8 trong JS để xoá class cho phần tử HTML thông qua đoạn code dưới đây nha.HTML
CSS
Javascript
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 9 như đoạn code dưới đây:Javascript
Cách Remove Multiple Class JSTrong 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 8. Để hiẻu rõ hơn bạn xem đoạn code sau nha:HTML
CSS
Javascript 2Và 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 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
Javascript 4Và kết quả bạn xem ở dưới đây nha. See the Pen Untitled by haycuoilennao19 (@haycuoilennao19) on CodePen. Sử Dụng Toggle ClassPhầ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 5CSS 6Javascript 7Và 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ẻ! |