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
← 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:
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
Sau khi nhấp vào nút nhất định, đầu ra sẽ là –
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
Sau khi nhấp vào nút nhất định, đầu ra sẽ là –
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ể.
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
Sau khi nhấp vào nút nhất định, đầu ra sẽ là –
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)
- 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
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