HTML thêm thuộc tính vào phần tử
Phương thức setAttribute() được sử dụng để thiết lập hoặc thêm một thuộc tính cho một phần tử cụ thể và cung cấp một giá trị cho nó. Nếu thuộc tính đã tồn tại thì chỉ thiết lập hoặc thay đổi giá trị của thuộc tính. Vì vậy, chúng ta cũng có thể sử dụng phương thức setAttribute() để cập nhật giá trị của thuộc tính hiện có. Nếu thuộc tính tương ứng không tồn tại, nó sẽ tạo một thuộc tính mới với tên và giá trị được chỉ định. Phương thức này không trả về bất kỳ giá trị nào. Tên thuộc tính tự động chuyển đổi thành chữ thường khi chúng ta sử dụng nó trên phần tử HTML Show Mặc dù chúng ta có thể thêm thuộc tính style bằng phương thức setAttribute() nhưng không nên sử dụng phương thức này để tạo kiểu. Để thêm kiểu, chúng ta có thể sử dụng các thuộc tính của đối tượng kiểu sẽ thay đổi kiểu một cách hiệu quả. Nó có thể rõ ràng với đoạn mã sau cách sai Khuyến cáo không nên dùng để thay đổi phong cách cách đúng đắn Cách chính xác để thay đổi phong cách được đưa ra dưới đây Để lấy giá trị của một thuộc tính, chúng ta có thể sử dụng phương thức getAttribute() và để xóa một thuộc tính cụ thể khỏi một phần tử, chúng ta có thể sử dụng phương thức removeAtrribute() Nếu chúng ta đang thêm một thuộc tính Boolean chẳng hạn như bị vô hiệu hóa, thì bất kể giá trị của nó là gì, nó luôn được coi là đúng. Nếu chúng ta yêu cầu đặt giá trị của thuộc tính Boolean thành false, chúng ta phải xóa toàn bộ thuộc tính bằng phương thức removeAttribute() cú phápCác đối số của phương pháp này không phải là tùy chọn. Cả hai tham số phải được bao gồm khi sử dụng phương pháp này. Các giá trị tham số của phương thức này được định nghĩa như sau Giá trị tham sốtên thuộc tính. Nó là tên của thuộc tính mà chúng ta muốn thêm vào một phần tử. Nó không thể để trống; . e. , nó không phải là tùy chọn giá trị thuộc tính. Đó là giá trị của thuộc tính mà chúng tôi đang thêm vào một phần tử. Nó cũng không phải là một giá trị tùy chọn Hãy hiểu cách sử dụng phương thức setAttribute() bằng cách sử dụng một số hình ảnh minh họa Ví dụ 1Trong ví dụ này, chúng tôi đang thêm thuộc tính href có giá trị là "https. //www. javatpoint. com/" vào thẻ có id = "link" Kiểm tra nó ngay bây giờđầu ra Sau khi thực thi đoạn mã trên, đầu ra sẽ là - Chúng ta có thể thấy rằng trước khi nhấp vào nút đã cho, liên kết không được tạo. Sau khi nhấp vào nút, đầu ra sẽ là - Bây giờ, chúng ta có thể thấy rằng liên kết đã được tạo Ví dụ2Trong ví dụ này, chúng tôi đang cập nhật giá trị của thuộc tính hiện có bằng phương thức setAttribute(). Ở đây, chúng tôi đang chuyển đổi trường văn bản thành nút bằng cách thay đổi giá trị của thuộc tính loại từ văn bản thành nút Chúng ta phải nhấp vào nút được chỉ định để xem hiệu ứng Kiểm tra nó ngay bây giờđầu ra Sau khi thực thi đoạn mã trên, đầu ra sẽ là - Sau khi nhấp vào nút, đầu ra sẽ là - Ví dụ3Ở đây, chúng tôi đang thêm một thuộc tính Boolean bị vô hiệu hóa để vô hiệu hóa nút được chỉ định. Nếu chúng ta đặt giá trị của thuộc tính bị vô hiệu hóa thành một chuỗi trống, thì nó sẽ tự động được đặt thành true khiến nút bị vô hiệu hóa Khi trình duyệt tải trang, nó sẽ “đọc” (một từ khác. “phân tích cú pháp”) HTML và tạo các đối tượng DOM từ nó. Đối với các nút phần tử, hầu hết các thuộc tính HTML tiêu chuẩn sẽ tự động trở thành thuộc tính của các đối tượng DOM Chẳng hạn, nếu thẻ là 7, thì đối tượng DOM có 8Nhưng ánh xạ thuộc tính-thuộc tính không phải là một đối một. Trong chương này, chúng ta sẽ chú ý đến việc tách biệt hai khái niệm này, để xem làm thế nào để làm việc với chúng, khi chúng giống nhau và khi chúng khác nhau. Chúng tôi đã thấy các thuộc tính DOM tích hợp sẵn. Có rất nhiều. Nhưng về mặt kỹ thuật, không ai giới hạn chúng tôi và nếu không đủ, chúng tôi có thể thêm của riêng mình Các nút DOM là các đối tượng JavaScript thông thường. Chúng ta có thể thay đổi chúng Chẳng hạn, hãy tạo một thuộc tính mới trong 9
Chúng ta cũng có thể thêm một phương thức
Chúng tôi cũng có thể sửa đổi các nguyên mẫu dựng sẵn như 0 và thêm các phương thức mới cho tất cả các phần tử
Vì vậy, các thuộc tính và phương thức DOM hoạt động giống như các đối tượng JavaScript thông thường
Trong HTML, các thẻ có thể có các thuộc tính. Khi trình duyệt phân tích cú pháp HTML để tạo các đối tượng DOM cho các thẻ, nó sẽ nhận ra các thuộc tính tiêu chuẩn và tạo các thuộc tính DOM từ chúng Vì vậy, khi một phần tử có 3 hoặc một thuộc tính tiêu chuẩn khác, thì thuộc tính tương ứng sẽ được tạo. Nhưng điều đó không xảy ra nếu thuộc tính không chuẩnVí dụ
Xin lưu ý rằng một thuộc tính tiêu chuẩn cho một phần tử có thể không xác định đối với một phần tử khác. Chẳng hạn, 4 là tiêu chuẩn cho 5 (), nhưng không phải cho 6 (). Các thuộc tính tiêu chuẩn được mô tả trong đặc tả cho lớp phần tử tương ứngỞ đây chúng ta có thể thấy nó
Vì vậy, nếu một thuộc tính không chuẩn, thì sẽ không có thuộc tính DOM cho thuộc tính đó. Có cách nào để truy cập các thuộc tính như vậy không? Chắc chắn rồi. Tất cả các thuộc tính có thể truy cập bằng cách sử dụng các phương pháp sau
Các phương thức này hoạt động chính xác với những gì được viết bằng HTML Ngoài ra, người ta có thể đọc tất cả các thuộc tính bằng cách sử dụng 1. một tập hợp các đối tượng thuộc về một lớp dựng sẵn, với các thuộc tính 2 và 3Đây là bản demo đọc thuộc tính không chuẩn
Thuộc tính HTML có các tính năng sau
Đây là bản trình diễn mở rộng về cách làm việc với các thuộc tính
Xin lưu ý
Khi một thuộc tính tiêu chuẩn thay đổi, thuộc tính tương ứng sẽ được cập nhật tự động và ngược lại (với một số ngoại lệ) Trong ví dụ dưới đây, 3 được sửa đổi như một thuộc tính và chúng ta có thể thấy thuộc tính cũng được thay đổi. Và sau đó ngược lại như vậy
Nhưng có những trường hợp loại trừ, ví dụ: 3 chỉ đồng bộ hóa từ thuộc tính → thuộc tính chứ không quay lại
Trong ví dụ trên
“Tính năng” đó thực sự có thể hữu ích, bởi vì hành động của người dùng có thể dẫn đến _10_______3 thay đổi, và sau đó, nếu chúng ta muốn khôi phục giá trị “gốc” từ HTML, thì đó là thuộc tính Thuộc tính DOM không phải lúc nào cũng là chuỗi. Chẳng hạn, thuộc tính 6 (đối với các hộp kiểm) là một giá trị boolean
Có những ví dụ khác. Thuộc tính 7 là một chuỗi, nhưng thuộc tính 7 là một đối tượng 0Hầu hết các thuộc tính là chuỗi mặc dù Rất hiếm khi, ngay cả khi loại thuộc tính DOM là một chuỗi, nó có thể khác với thuộc tính. Chẳng hạn, thuộc tính DOM 9 luôn là một URL đầy đủ, ngay cả khi thuộc tính chứa URL tương đối hoặc chỉ là một 0Đây là một ví dụ 1Nếu chúng tôi cần giá trị của 9 hoặc bất kỳ thuộc tính nào khác chính xác như được viết trong HTML, chúng tôi có thể sử dụng 2Khi viết HTML, chúng ta sử dụng rất nhiều thuộc tính chuẩn. Nhưng còn những cái không chuẩn, tùy chỉnh thì sao? Đôi khi các thuộc tính không chuẩn được sử dụng để chuyển dữ liệu tùy chỉnh từ HTML sang JavaScript hoặc để "đánh dấu" các phần tử HTML cho JavaScript Như thế này 2Ngoài ra, chúng có thể được sử dụng để tạo kiểu cho một phần tử Chẳng hạn, ở đây đối với trạng thái đơn đặt hàng, thuộc tính 3 được sử dụng 3Tại sao việc sử dụng một thuộc tính lại thích hợp hơn là có các lớp như 4, 5, 6?Bởi vì một thuộc tính thuận tiện hơn để quản lý. Trạng thái có thể được thay đổi dễ dàng như 4Nhưng có thể có vấn đề với các thuộc tính tùy chỉnh. Điều gì sẽ xảy ra nếu chúng ta sử dụng một thuộc tính không chuẩn cho mục đích của mình và sau đó tiêu chuẩn giới thiệu nó và khiến nó làm một việc gì đó? . Có thể có những hiệu ứng bất ngờ trong trường hợp như vậy Để tránh xung đột, tồn tại các thuộc tính Tất cả các thuộc tính bắt đầu bằng “data-” được dành riêng cho người lập trình sử dụng. Chúng có sẵn trong tài sản 7Chẳng hạn, nếu một 8 có một thuộc tính tên là 9, thì thuộc tính đó có sẵn là 0Như thế này 5Các thuộc tính nhiều từ như 1 trở thành trường hợp lạc đà. 2Đây là một ví dụ về "trạng thái đơn hàng" được viết lại 6Sử dụng thuộc tính 3 là cách hợp lệ, an toàn để chuyển dữ liệu tùy chỉnhXin lưu ý rằng chúng tôi không chỉ có thể đọc mà còn có thể sửa đổi các thuộc tính dữ liệu. Sau đó, CSS cập nhật chế độ xem cho phù hợp. trong ví dụ trên dòng cuối cùng 4 đổi màu thành xanh dương
Một so sánh nhỏ PropertiesAttributesTypeBất kỳ giá trị nào, thuộc tính tiêu chuẩn có các loại được mô tả trong thông số kỹ thuậtMột chuỗiNameName phân biệt chữ hoa chữ thườngTên không phân biệt chữ hoa chữ thườngCác phương pháp để làm việc với các thuộc tính là
Đối với hầu hết các trường hợp, sử dụng thuộc tính DOM là tốt hơn. Chúng ta chỉ nên đề cập đến các thuộc tính khi các thuộc tính DOM không phù hợp với chúng ta, chẳng hạn như khi chúng ta cần các thuộc tính chính xác Tôi có thể thêm thuộc tính vào phần tử HTML không?Tất cả các thành phần HTML này được sử dụng để tạo cấu trúc của tài liệu và tạo ý nghĩa cho tài liệu. Để tăng thêm ý nghĩa cho các phần tử, bạn có thể gán cho chúng các thuộc tính . Thẻ có thể có nhiều thuộc tính. Bạn sẽ tách từng thuộc tính khỏi các thuộc tính khác bằng dấu cách.
Thuộc tính phần tử HTML là gì?Thuộc tính. Thuộc tính HTML DOM là giá trị (của Phần tử HTML) mà bạn có thể đặt hoặc thay đổi . Vì vậy, sự khác biệt chính giữa các thuộc tính và thuộc tính là. Các thuộc tính được xác định bởi HTML, nhưng các thuộc tính được xác định bởi DOM. Giá trị của một thuộc tính là hằng số, nhưng giá trị của một thuộc tính là biến.
Làm cách nào để thêm thuộc tính vào một phần tử bằng JavaScript?JavaScript setAttribute() Phương thức setAttribute() được sử dụng để đặt hoặc thêm thuộc tính cho một phần tử cụ thể và cung cấp giá trị cho phần tử đó. Nếu thuộc tính đã tồn tại thì chỉ thiết lập hoặc thay đổi giá trị của thuộc tính. Vì vậy, chúng ta cũng có thể sử dụng phương thức setAttribute() để cập nhật giá trị của thuộc tính hiện có.
Làm cách nào để thêm thuộc tính trong CSS?Có thể tạo kiểu cho các phần tử HTML có thuộc tính hoặc giá trị thuộc tính cụ thể. . Bộ chọn CSS [thuộc tính]. . Bộ chọn CSS [thuộc tính="giá trị"]. . Bộ chọn CSS [thuộc tính~="giá trị"]. . CSS [thuộc tính. = "giá trị"] Bộ chọn. . Bộ chọn CSS [thuộc tính^="giá trị"]. . Bộ chọn CSS [thuộc tính$="giá trị"]. . Bộ chọn CSS [thuộc tính*="giá trị"] |