programming javascript

Cách thêm lớp trong JavaScript

Trong bài viết này, bạn sẽ tìm hiểu 3 cách khác nhau để JavaScript thêm lớp vào phần tử HTML. Bạn sẽ thấy các biến thể khác nhau như thêm nhiều lớp vào phần tử, thêm lớp vào phần thân, tạo phần tử mới, v.v.

Bạn có thể trực tiếp thêm một lớp vào phần tử dưới dạng thuộc tính HTML [Ví dụ:. 

element.classList.add['class_name']
0] hoặc sử dụng JavaScript để thêm một lớp vào phần tử [mà chúng ta sẽ thấy trong phần này].

Dưới đây là một ví dụ về việc thêm một lớp vào phần tử HTML bằng cách sử dụng javascript

  • JS
  • CSS

// selecting the element
let button = document.querySelector['#button'];

// Add class to the element
button.addEventListener['click', function[] {
  button.classList.add['.main-btn'];
}];

.main-btn {
  border: none;
  color: white;
  background: blue;
  padding: 10px 30px;
  border-radius: 5px;
}

@keyframes shake {
  0% { transform: translateX[0] }

  25% { transform: translateX[-5px] }

  50% { transform: translateX[0] }

  75% { transform: translateX[5px] }

  100% { transform: translateX[0] }
}

.main-btn:hover {
  animation: shake 3 0.2s ease-in-out;
}

Đầu ra . Nhấp vào nút bên dưới và javascript sẽ thêm một lớp vào nút.

Bấm vào nút bên dưới

Nhấp vào tôi để thêm lớp

Đây là một cách năng động để thêm một lớp vào một phần tử HTML. Hãy xem cách javascript thêm lớp động vào phần tử HTML

    Mục lục

  1. Javascript thêm lớp
    1. Sử dụng thuộc tính classList
      1. Thêm lớp vào một sự kiện
      2. Thêm nhiều lớp
    2. Sử dụng thuộc tính className
      1. Thêm nhiều lớp với thuộc tính className
    3. Sử dụng phương thức setAttribute
      1. Thêm nhiều lớp bằng setAttribute
  2. Thêm cơ thể lớp
  3. Thêm div lớp
  4. Thêm lớp vào một phần tử mới
  5. Thêm lớp javascript khi di chuột

Thêm lớp javascript - 3 cách

Trong khi làm việc ở giao diện người dùng, chúng ta thường cần thêm động CSS vào phần tử HTML. Để thêm CSS động vào một phần tử, hãy thêm một lớp vào phần tử

Có 3 cách để thêm lớp CSS bằng javascript

  1. Sử dụng classList Thuộc tính
  2. Sử dụng thuộc tính className property
  3. Sử dụng phương pháp setAttribute method

1. Sử dụng thuộc tính classList property

Mọi phần tử HTML đều có thuộc tính classList . Thuộc tính này có nhiều phương thức khác nhau. Một trong những phương thức là phương thức add[] . Phương thức này được sử dụng để thêm một lớp vào phần tử. 

element.classList.add['class_name']

Để thêm một lớp CSS bằng javascript, hãy làm theo các bước bên dưới

  1. Chọn phần tử HTML
  2. Áp dụng thuộc tính classList cho nó.
  3. Sử dụng phương thức add[] để thêm lớp và chuyển tên lớp làm đối số.

Thí dụ

Javascript adds a CSS class to this paragraph.



  // Get the element with id="id1"
  const element = document.getElementById["id1"];
  // Add a class [quote] to the element
  element.classList.add["quote"];

▶ Hãy thử

Thêm lớp javascript vào một sự kiện

Nói chung, chúng tôi thêm các lớp bằng javascript khi có sự kiện xảy ra. Ví dụ: khi người dùng nhấp vào nút, khi người dùng cuộn trang xuống, v.v.

Hãy xem cách thêm lớp vào phần tử HTML khi người dùng nhấp vào nút .

Thí dụ

Add class to above paragraph


  // add class on click javascript
  function addClass[] {
    // Get the paragraph element
    const element = document.getElementById["id1"];
    // Add a class to the paragraph
    element.classList.add["beautify"];
  }

▶ Hãy thử

đầu ra

Trong đoạn mã trên, trong trường hợp nhấp vào nút, một chức năng được thực thi để thêm một lớp vào thành phần đoạn văn

báo cáo quảng cáo này

Thêm vào Nhiều lớp javascript

Bạn cũng có thể thêm nhiều lớp cùng một lúc bằng cách sử dụng phương thức add[] .

Để thêm nhiều lớp cùng một lúc, hãy chuyển nhiều lớp cách nhau bằng dấu phẩy

  • JS
  • HTML
  • CSS

function addClass[] {
  const element = document.getElementById["id1"];
  // passing multiple classes separated by comma
  element.classList.add["color", "border", "others"];
}

Add classes to above paragraph

________số 8

2. Sử dụng thuộc tính className property

Thuộc tính className của một phần tử có thể được sử dụng để lấy và đặt các lớp gắn liền với phần tử đó.

Thuộc tính className trả về các lớp của phần tử ở dạng chuỗi. Nếu phần tử có một lớp tên là class1 thì nó trả về "class1", nếu phần tử có 2 lớp class1< . and class2 then it returns "class1 class2", and so on.

Paragraph 1


Paragtaph 2



  const element1 = document.getElementById["id1"];
  const element2 = document.getElementById["id2"];
  console.log[element1.className]; // "box"
  console.log[element2.className]; // "big red box"

Thuộc tính className có thể đọc cũng như ghi các lớp của phần tử.

Để thêm một lớp mới vào phần tử, hãy gán lớp mới cho thuộc tính className của phần tử dưới dạng một chuỗi.

Lưu ý . Việc gán tên lớp trực tiếp cho thuộc tính className sẽ ghi đè lên các lớp hiện có.

Đây là một ví dụ để hiển thị điều này

Thí dụ

// selecting the element
let button = document.querySelector['#button'];

// Add class to the element
button.addEventListener['click', function[] {
  button.classList.add['.main-btn'];
}];
0

▶ Hãy thử

đầu ra

Để thêm các lớp mới mà không thay thế các lớp cũ hơn, hãy sử dụng toán tử += để chỉ định lớp mới. Nó sẽ giữ các lớp cũ hơn và thêm những lớp mới.

Thí dụ

.main-btn {
  border: none;
  color: white;
  background: blue;
  padding: 10px 30px;
  border-radius: 5px;
}

@keyframes shake {
  0% { transform: translateX[0] }

  25% { transform: translateX[-5px] }

  50% { transform: translateX[0] }

  75% { transform: translateX[5px] }

  100% { transform: translateX[0] }
}

.main-btn:hover {
  animation: shake 3 0.2s ease-in-out;
}
0

▶ Hãy thử

Có thể nhầm . Thêm khoảng trắng trước tên lớp khi sử dụng 

element.classList.add['class_name']
1 để thêm lớp. Bởi vì nếu phần tử có lớp cũ "class1" và bạn thêm lớp mới "class 2" thì nó sẽ trở thành "class1 class2", điều này vô nghĩa đối với trình duyệt.

Thêm nhiều lớp bằng className

Để thêm nhiều lớp, hãy gán các tên lớp mới được phân tách bằng dấu cách cho thuộc tính className của phần tử.

Thí dụ

.main-btn {
  border: none;
  color: white;
  background: blue;
  padding: 10px 30px;
  border-radius: 5px;
}

@keyframes shake {
  0% { transform: translateX[0] }

  25% { transform: translateX[-5px] }

  50% { transform: translateX[0] }

  75% { transform: translateX[5px] }

  100% { transform: translateX[0] }
}

.main-btn:hover {
  animation: shake 3 0.2s ease-in-out;
}
1

▶ Hãy thử

Ở phía trước, tìm hiểu thêm

  • JavaScript Loại bỏ lớp
  • Chuyển đổi lớp JavaScript
  • JavaScript Nhận phần tử theo lớp

3. Sử dụng setAttribute Phương pháp

setAttribute là một phương thức có thể được sử dụng để thêm một thuộc tính mới vào một phần tử.

Một lớp cũng là một thuộc tính phần tử. Vì vậy, chúng ta có thể sử dụng phương thức setAttribute để thêm một lớp.

Phương thức setAttribute có thể được sử dụng để thêm một thuộc tính mới vào một phần tử. Phương thức nhận 2 tham số là tên của thuộc tính và giá trị của thuộc tính.

  • JS
  • CSS

.main-btn {
  border: none;
  color: white;
  background: blue;
  padding: 10px 30px;
  border-radius: 5px;
}

@keyframes shake {
  0% { transform: translateX[0] }

  25% { transform: translateX[-5px] }

  50% { transform: translateX[0] }

  75% { transform: translateX[5px] }

  100% { transform: translateX[0] }
}

.main-btn:hover {
  animation: shake 3 0.2s ease-in-out;
}
2

.main-btn {
  border: none;
  color: white;
  background: blue;
  padding: 10px 30px;
  border-radius: 5px;
}

@keyframes shake {
  0% { transform: translateX[0] }

  25% { transform: translateX[-5px] }

  50% { transform: translateX[0] }

  75% { transform: translateX[5px] }

  100% { transform: translateX[0] }
}

.main-btn:hover {
  animation: shake 3 0.2s ease-in-out;
}
3

▶ Hãy thử

Thêm nhiều lớp bằng setAttribute

Để thêm nhiều lớp vào phần tử, hãy chuyển nhiều tên lớp được phân tách bằng dấu cách cho phương thức setAttribute .

  • JS
  • CSS

.main-btn {
  border: none;
  color: white;
  background: blue;
  padding: 10px 30px;
  border-radius: 5px;
}

@keyframes shake {
  0% { transform: translateX[0] }

  25% { transform: translateX[-5px] }

  50% { transform: translateX[0] }

  75% { transform: translateX[5px] }

  100% { transform: translateX[0] }
}

.main-btn:hover {
  animation: shake 3 0.2s ease-in-out;
}
4

.main-btn {
  border: none;
  color: white;
  background: blue;
  padding: 10px 30px;
  border-radius: 5px;
}

@keyframes shake {
  0% { transform: translateX[0] }

  25% { transform: translateX[-5px] }

  50% { transform: translateX[0] }

  75% { transform: translateX[5px] }

  100% { transform: translateX[0] }
}

.main-btn:hover {
  animation: shake 3 0.2s ease-in-out;
}
5

▶ Hãy thử

JavaScript thêm lớp vào nội dung

Để thêm một lớp vào phần thân của trang web, hãy chọn phần thân của 

element.classList.add['class_name']
2 và sử dụng một trong 2 phương pháp được đề cập để thêm các lớp CSS

Thí dụ

.main-btn {
  border: none;
  color: white;
  background: blue;
  padding: 10px 30px;
  border-radius: 5px;
}

@keyframes shake {
  0% { transform: translateX[0] }

  25% { transform: translateX[-5px] }

  50% { transform: translateX[0] }

  75% { transform: translateX[5px] }

  100% { transform: translateX[0] }
}

.main-btn:hover {
  animation: shake 3 0.2s ease-in-out;
}
6

▶ Hãy thử

JavaScript thêm lớp vào div

Như đã đề cập ở trên, bạn có thể sử dụng bất kỳ phương thức nào trong 2 phương thức trên để thêm lớp vào phần tử div bằng javascript

  1. Bước 1 . Chọn phần tử
  2. Bước 2 . Sử dụng thuộc tính className hoặc classList property

Thí dụ

.main-btn {
  border: none;
  color: white;
  background: blue;
  padding: 10px 30px;
  border-radius: 5px;
}

@keyframes shake {
  0% { transform: translateX[0] }

  25% { transform: translateX[-5px] }

  50% { transform: translateX[0] }

  75% { transform: translateX[5px] }

  100% { transform: translateX[0] }
}

.main-btn:hover {
  animation: shake 3 0.2s ease-in-out;
}
7

▶ Hãy thử

JavaScript thêm lớp vào phần tử mới

Hãy tưởng tượng một tình huống mà bạn muốn thêm một thành phần mới vào trang web, chẳng hạn như tạo một mục danh sách trong ứng dụng danh sách Công việc. Bạn có thể sử dụng thuộc tính classList để thêm một lớp vào phần tử mới.

Để thêm nhiều lớp, hãy chuyển các tên lớp được phân tách bằng dấu cách vào classList. phương thức add[] .

Thí dụ

.main-btn {
  border: none;
  color: white;
  background: blue;
  padding: 10px 30px;
  border-radius: 5px;
}

@keyframes shake {
  0% { transform: translateX[0] }

  25% { transform: translateX[-5px] }

  50% { transform: translateX[0] }

  75% { transform: translateX[5px] }

  100% { transform: translateX[0] }
}

.main-btn:hover {
  animation: shake 3 0.2s ease-in-out;
}
8

▶ Hãy thử

Thêm một lớp trên di chuột javascript

Để thêm một lớp vào một phần tử khi di chuột, hãy sử dụng sự kiện 

element.classList.add['class_name']
3. Đính kèm sự kiện 
element.classList.add['class_name']
3 vào trình xử lý sự kiện kích hoạt phần tử để thêm lớp

Thí dụ

.main-btn {
  border: none;
  color: white;
  background: blue;
  padding: 10px 30px;
  border-radius: 5px;
}

@keyframes shake {
  0% { transform: translateX[0] }

  25% { transform: translateX[-5px] }

  50% { transform: translateX[0] }

  75% { transform: translateX[5px] }

  100% { transform: translateX[0] }
}

.main-btn:hover {
  animation: shake 3 0.2s ease-in-out;
}
9

▶ Hãy thử

Sự kết luận

Tổng hợp các cách trên để thêm class vào phần tử trong JavaScript

  1. Phương pháp 1 . Sử dụng classList. add[] Phương thức
  2. Phương pháp 2 . Sử dụng thuộc tính className property
  3. Phương pháp 3 . Sử dụng phương thức setAttribute[] method

Bạn có thể thêm một hoặc nhiều lớp vào một phần tử bằng bất kỳ phương pháp nào ở trên

Nếu bạn cần hỗ trợ với dự án JavaScript của mình, vui lòng liên hệ với các chuyên gia để nhận trợ giúp trực tuyến về bài tập JavaScript

Bạn có thể thêm một lớp trong JavaScript không?

CSS sử dụng thuộc tính lớp để thực hiện một loạt hành động trên các phần tử có cùng tên lớp. DOM [Mô hình đối tượng tài liệu] là một phương thức thao tác với tài liệu HTML. Javascript cho phép bạn thêm các lớp vào nội dung trang web của mình thông qua tài liệu .

Làm cách nào để nối thêm lớp trong JavaScript?

className += " " + newClassName; . Điều này sẽ hoạt động trên hầu hết mọi trình duyệt. Không gian ở đầu rất quan trọng, bởi vì thuộc tính className coi các lớp css giống như một chuỗi duy nhất, phải khớp với thuộc tính lớp trên các phần tử HTML [trong đó nhiều lớp phải được phân tách bằng dấu cách]

Làm cách nào để đặt một lớp trong JavaScript?

Để thay đổi tất cả các lớp cho một phần tử. getElementById["MyElement"]. className = "MyClass"; [Bạn có thể sử dụng danh sách được phân cách bằng dấu cách để áp dụng nhiều lớp. ]

Làm cách nào để thêm lớp trong JavaScript một cách linh hoạt?

Để làm điều đó, trước tiên chúng ta tạo một lớp và gán nó cho các thành phần HTML mà chúng ta muốn áp dụng thuộc tính CSS . Chúng ta có thể sử dụng thuộc tính className và classList trong JavaScript. Cách tiếp cận. Thuộc tính className được sử dụng để thêm một lớp trong JavaScript.

Bài Viết Liên Quan

Ví dụ về bảo mật mạng Python
Selen vô hiệu hóa javascript chrome
Tập lệnh Python để tìm kiếm một chuỗi trong nhiều tệp
Sử dụng thế giới thực của python là gì?
Dự án thừa số nguyên tố lớn nhất euler python
Tiện ích mở rộng Mysqli cho PHP
Web phim php
Css tùy chỉnh so với khung
Mẫu quản trị Bootstrap 5 miễn phí GitHub
Tấm dụng cụ điện
Làm cách nào để nhập thông tin đăng nhập bằng html?
Bạn có thể biến HTML thành một ứng dụng không?
Tìm đường dẫn Python Thiết bị đầu cuối Mac
2023 dòng n của anh ấy 0-60
Vị trí nhị phân php không hợp lệ và phải được cập nhật
Vòng lặp wordpress là gì
Tải xuống tệp excel trong PHP
Cách tính đa thức trong python
Cách chạy shell script trong php
Các loại cú pháp PHP khác nhau là gì?

Toplist mới

#1
Top 6 bản thân em phải làm gì để phòng chống hiv/aids 2023
6 tháng trước
#2
Top 7 số 20 gồm 2 và 0 đúng hay sai 2023
6 tháng trước
#3
Top 7 địa lý lớp 6 bài 19: lớp đất và các nhân tố hình thành đất một số nhóm đất điển hình trang 178 2023
6 tháng trước
#4
Top 7 h thực hiện chủ trương đường lối chính sách của đảng pháp luật của nhà nước 2023
6 tháng trước
#5
Top 6 on tập tiếng việt lớp 7 học kĩ 2 violet 2023
6 tháng trước
#6
Top 7 trung du và miền núi bắc bộ có thế mạnh nổi bật về luyện kim đen 2023
6 tháng trước
#7
Top 8 mơ thấy có người to tình với mình 2023
6 tháng trước
#8
Top 6 nước yến cao cấp yến sào thiên hoàng 2023
6 tháng trước
#9
Top 7 ví dụ về quyết định hành chính nhà nước 2023
6 tháng trước

Bài mới nhất

Bùi duy hùng viện công nghiệp hóa học năm 2024
Bài văn kể về mẹ hay nhất thế giới năm 2024
Bố cục văn bản phong cách hồ chí minh năm 2024
Giải bài 154 va 155 sgk toán 6 tập 1 năm 2024
Top places to visit in ho chi minh city năm 2024
Top phim trinh tham an do hay nhat năm 2024
Cách sửa excel bị lỗi không copy được sheet năm 2024
Top 5 kamen rider có thể đánh bại decade năm 2024
Bài tập vẽ biểu đồ nội lực có lời giả năm 2024
And you and you and you có trong bài nào năm 2024

Chủ Đề

Hỏi Đáp Mẹo Hay Toplist Là gì Địa Điểm Hay programming Học Tốt mẹo hay Công Nghệ Nghĩa của từ Khỏe Đẹp Bao nhiêu đánh giá Top List bao nhieu bao nhiêu hướng dẫn So Sánh Tiếng anh Bài tập So sánh Xây Đựng Sản phẩm tốt Ngôn ngữ Món Ngon Bài Tập Ở đâu Thế nào Tại sao Hướng dẫn Máy tính Dịch Bao lâu Đại học Khoa Học Vì sao