Home / Kiến thức Hosting / thay đổi thuộc tính css bằng javascript

Thay đổi thuộc tính css bằng javascript

admin - 10/01/2023 30

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

Bạn đang xem: Thay đổi thuộc tính css bằng javascript

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

Sau trên đây mình sẽ đi vào ví dụ thêm class vào trong bộ phận HTML bởi add() method trong classList nha.

HTML

<h1 id ="logo">hostingvietnam.vn</h1>JavascriptfunctionaddClass()letele=document.getElementById("logo");/*thêmclass*/ele.classList.add("title");Bạn hoàn toàn có thể xem công dụng dưới trên đây nha.

See the Pen địa chỉ class js by haycuoilennao19 (
haycuoilennao19) on CodePen.

Nếu như bạn có nhu cầu thêm những class và một lúc cho phần tử trong website thì chúng ta có thể thực hiện tại như cách tiếp sau đây nha:

HTML

<h1 id ="logo">hostingvietnam.vn</h1>JavascriptfunctionaddMultipleClass()letelement=document.getElementById("logo");/*thêmmultipleclass*/element.classList.add("title","color","background");addMultipleClass();Và tác dụng bạn xem tiếp sau đây nha:

See the Pen addMultipleClass js by haycuoilennao19 (

Trong phần này bọn họ sẽ sử dụng thuộc tính classNam nhằm thêm class vào element nha.

Xem thêm: 【Hướng Dẫn】 Cách Mở Paint Trong Win 10 (4 Cách Cho Bạn), 【Hướng Dẫn】Cách Mở Paint Trong Win 10

Javascript
functionaddClass()letelement=document.getElementById("logo");/*thêmclassbằngclassName*/element.className="title";addClass();Ngoài ra bạn cũng có thể add multiple class đến element bằng className như đoạn code dưới đây:
Javascript
functionaddMultipleClass()letelement=document.getElementById("logo");/*thêmnhièuclassbằngclassName*/element.className+="titlecolorbackground";addMultipleClass();
Trong phần này họ sẽ đi sử dụng thuộc tính classList vào JS để xoá class cho bộ phận HTML thông qua đoạn code tiếp sau đây nha.
HTML
hostingvietnam.vnCSS.titlecolor:blue;.backgroundbackground:purple;JavascriptfunctionremoveClass()letelement=document.getElementById("logo");/*xoáclasstitle*/element.classList.remove("title");removeClass();Và tác dụng bạn xem dự án Codepen pên dưới nha.
See the Pen địa chỉ class by classNamejs by haycuoilennao19 (
haycuoilennao19) on CodePen.
Ngoài ra chúng ta có thể xoá class cho thành phần HTML trải qua việc thực hiện className như đoạn code dưới đây:
Javascript
functionremoveClass()letelement=document.getElementById("logo");/*xoáclasstitle*/element.className=element.className.replace("title","");removeClass();
Trong phàn này bọn họ sẽ lấn sân vào tìm hiểu cách để xoá những class và một lúc bởi thuộc tính classList. Để hiẻu rõ hơn bạn xem đoạn code sau nha:
HTML
hostingvietnam.vnCSS.titlecolor:blue;.backgroundbackground:purple;JavascriptfunctionremoveMultipleClass()letelement=document.getElementById("logo");/*xoánhiềuclasscùngmộtlúc*/element.classList.remove("title","background");removeMultipleClass();Và tác dụng bạn coi Codepen ben dưới nha:
See the Pen removeMultipleClass js by haycuoilennao19 (
Trong phần này chúng ta sẽ đi vào sử dụng thuộc tính classList.contains() để kiểm tra bộ phận có đựng class tốt không. Để làm rõ hơn bạn xem đoạn code sau nha:
HTML
hostingvietnam.vnJavascriptfunctioncheckClass()letelement=document.getElementById("logo");/*checkclass*/if(element.classList.contains("title"))console.log("Tồntạiclass");elseconsole.log("KhôngTồntạiclass");checkClass();//TồntạiclassVà hiệu quả bạn coi ở sau đây nha.

Xem thêm: Top 30+ Việc Làm Việc Ăn Sản Phẩm Tại Nhà Online "Hốt Bạc" Không Cần Vốn Nhiều

See the Pen Untitled by haycuoilennao19 (
Phần cuối cùng chúng ta sẽ đi vào tìm hiểu cách để đổi khác giữa hai
HTML
hostingvietnam.vnToggleClassCSS.titlecolor:blue;JavascriptfunctiontoggleClass()varelement=document.getElementById("logo");element.classList.toggle("title");Và tác dụng bạn xem dự án công trình trên Codepen bên dưới nha.
See the Pen toggleClass in js by haycuoilennao19 (

Tổng kết:

Qua trên đây mình mong nội dung bài viết sẽ cung cấp cho mình cách để thay đổi class bởi JS cho câu hỏi phát triển, thi công web cùng nếu có vướng mắc gì cứ gửi email mình đã phản hồi nhanh nhất có thể có thể. Rất mong bạn liên tiếp ủng hộ trang web để mình hoàn toàn có thể viết nhiều bài hay không chỉ có thế nhé. Chúc bạn có một ngày vui vẻ!