Cách thêm lớp vào một phần tử bằng JavaScript với hướng dẫn javascript, giới thiệu, lỗi javascript, ứng dụng javascript, vòng lặp, biến, đối tượng, bản đồ, typedarray, v.v.

Bạn đang xem: thêm lớp vào phần tử js

tiếp theo →
← trước

Làm cách nào để thêm một lớp vào một phần tử bằng JavaScript?

Thuộc tính class có thể được sử dụng trong CSS để thực hiện một số tác vụ cho các phần tử có tên lớp tương ứng. Trong bài viết này, chúng tôi thảo luận về cách thêm một lớp vào một phần tử bằng JavaScript. Trong JavaScript , có một số cách tiếp cận để thêm một lớp vào một phần tử. Chúng tôi có thể sử dụng thuộc tính .className hoặc phương thức .add () để thêm tên lớp vào phần tử cụ thể.

Bây giờ, hãy thảo luận về các phương pháp để thêm một lớp vào một phần tử.

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

Thuộc tính .className đặt tên lớp của một phần tử. Thuộc tính này có thể được sử dụng để trả về giá trị của thuộc tính lớp của một phần tử. Chúng tôi có thể sử dụng thuộc tính này để thêm một lớp vào phần tử HTML mà không cần thay thế lớp hiện có của nó.

Để thêm nhiều lớp, chúng tôi phải phân tách tên của chúng bằng khoảng trắng, chẳng hạn như “class1 class2” .

Nếu một lớp đã được khai báo cho một phần tử và chúng ta cần thêm tên lớp mới vào cùng một phần tử thì nó phải được khai báo bằng cách chèn một khoảng trắng trước khi viết tên lớp mới, nếu không, nó sẽ ghi đè lên tên lớp hiện có . Nó có thể được viết như sau:

Xem Thêm  Tập lệnh xóa dữ liệu khỏi bảng máy chủ SQL có khóa ngoại - xóa bảng với ràng buộc khóa ngoại sql

Trong đoạn mã trên, chúng tôi đã chèn một khoảng trắng trước newClass .

Cú pháp

Cú pháp thường được sử dụng của thuộc tính này để đặt hoặc trả lại tên lớp được đưa ra bên dưới.

Để đặt tên lớp

Để trả lại tên lớp

Ví dụ về việc sử dụng thuộc tính .className được đưa ra như sau.

Ví dụ – Thêm tên lớp

Trong ví dụ này, chúng tôi đang sử dụng thuộc tính .className để thêm lớp “para” vào phần tử đoạn có id “p1” >. Chúng tôi đang áp dụng CSS cho đoạn tương ứng bằng cách sử dụng tên lớp “para” .

Chúng tôi phải nhấp vào nút HTML “Thêm lớp” nhất định để xem hiệu ứng.

Kiểm tra ngay bây giờ

Đầu ra

Cách thêm lớp vào một phần tử bằng JavaScript

Sau khi nhấp vào nút nhất định, đầu ra sẽ là –

Cách thêm lớp vào một phần tử bằng JavaScript

Trong ví dụ tiếp theo, chúng tôi đang lấy tên của lớp bằng cách sử dụng thuộc tính .className .

Ví dụ – Lấy tên lớp

Trong ví dụ này, chúng tôi đang sử dụng thuộc tính .className để lấy tên lớp của phần tử đoạn có id = “p1” .

Chúng tôi phải nhấp vào nút HTML đã cho “Lấy tên lớp” để xem hiệu quả.

Kiểm tra ngay bây giờ

Đầu ra

Cách thêm lớp vào một phần tử bằng JavaScript

Sau khi nhấp vào nút nhất định, đầu ra sẽ là –

Cách thêm lớp vào một phần tử bằng JavaScript

Sử dụng phương thức add ()

Bây giờ, chúng ta hãy xem cách tiếp cận thứ hai để thêm tên lớp bằng JavaScript. Chúng ta có thể sử dụng phương thức add () để thêm tên lớp vào phần tử cụ thể.

Xem Thêm  Chuỗi JavaScript charCodeAt () (Có ví dụ) - mã char tại javascript

Cú pháp

Ví dụ

Trong ví dụ này, chúng tôi đang sử dụng phương thức add () để thêm tên lớp vào phần tử đoạn có id = “p1” . Chúng tôi phải nhấp vào nút HTML đã cho “Thêm lớp” để xem hiệu ứng.

Kiểm tra ngay bây giờ

Đầu ra

Cách thêm lớp vào một phần tử bằng JavaScript

Sau khi nhấp vào nút nhất định, đầu ra sẽ là –

Cách thêm lớp vào một phần tử bằng JavaScript

Chủ đề tiếp theo

Cách tính chu vi và diện tích hình tròn bằng JavaScript
< br />
← trước
tiếp theo →


Xem thêm những thông tin liên quan đến chủ đề thêm lớp vào phần tử js

Assignment môn Javascript năng cao (P3)

alt

  • Tác giả: Thầy Long Web
  • Ngày đăng: 2021-09-24
  • Đánh giá: 4 ⭐ ( 6293 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn thực hiện Assignment môn Javascript năng cao (P3) : Code javascript lấy loại sản phẩm, list sản phẩm từ API Server, code giỏ hàng, thanh toán

Vanilla JavaScript thêm các lớp vào các phần tử

  • Tác giả: vi.pinlivingcolor.com
  • Đánh giá: 3 ⭐ ( 4413 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi muốn sử dụng JS thuần túy để thêm các lớp vào một số phần tử và quen thuộc với việc chọn phần tử có ID, nhưng khi tôi cố gắng sử dụng getElementsByClassName, mã của tôi bị hỏng. Có phải nó không …

Làm cách nào tôi có thể thêm một lớp vào một phần tử DOM trong JavaScript?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 4514 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] new_row.className = “aClassName”; Dưới đây là thông tin thêm về MDN: className
Xem Thêm  HTML Chọn danh sách - html chọn từ danh sách

Một số cách thêm phần tử vào mảng trong Javascript

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 6283 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, mình sẽ trình bày một số cách thêm phần tử vào mảng trong Javascript. Sẽ có một số cách thay đổi mảng gốc, và có một số cách sẽ tạo ra một mảng mới và giữ nguyên mảng gốc. Mỗi cách…

Hàm push() trong JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 5776 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, chúng ta sẽ tìm hiểu về hàm push() trong JavaScript. Nếu như ở các ngôn ngữ lập trình khác. Việc thêm phần tử vào mảng

Thêm, loại bỏ & chuyển đổi lớp với classList trong JavaScript

  • Tác giả: galaxyz.net
  • Đánh giá: 5 ⭐ ( 1631 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Javascript Array Push: Cách thêm phần tử vào Array S :: Eloquent Javascript

  • Tác giả: gialaipc.com.vn
  • Đánh giá: 3 ⭐ ( 8634 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [ad_1]

    Mảng là danh sách các đối tượng có nguyên mẫu có các phương thức để thực hiện các thao tác đột biến. Độ

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php