CSS thuộc tính dữ liệu

Một điều đặc biệt về các thuộc tính dữ liệu HTML là các giá trị của nó cũng có thể được hiển thị trực tiếp thông qua CSS.

Bất cứ khi nào nội dung trong một trang thay đổi, quy trình thông thường là hiển thị nội dung đã thay đổi thông qua Javascript (áp dụng HTML mới). Nhưng điều này có thể được thực hiện cách khác bằng cách sử dụng thuộc tính dữ liệu trong CSS — bất cứ khi nào giá trị của thuộc tính dữ liệu thay đổi, giá trị mới sẽ tự động được hiển thị trong trang

Thuộc tính dữ liệu trong CSS

Có thể đọc thuộc tính dữ liệu trong CSS bằng thuộc tính nội dung. Chỉ có thể sử dụng thuộc tính CSS nội dung trên . trước và . sau phần tử giả.

Post 1

/* content of pseudo-element will be set to the current value of "data-point" */
#container::before {
	content: attr(data-point);
}

Trong ví dụ trên, bất cứ khi nào giá trị của data-point thay đổi, nội dung được hiển thị của #container. trước sẽ được thay đổi thành giá trị mới của thuộc tính.

Bạn cũng có thể đặt các thuộc tính CSS cụ thể khi giá trị của thuộc tính dữ liệu bằng một giá trị cụ thể

/* content of pseudo-element will be set to the current value of "data-point" */
#container::before {
	content: attr(data-point);
}

/* set color of pseudo-element to red when data-point=50 */
#container[data-point="50"]::before {
	color: red;
}

Một Video Ví dụ

Screencast bên dưới hiển thị một ví dụ mẫu về cách sử dụng thuộc tính dữ liệu trong CSS để cải thiện hiệu quả của nội dung được hiển thị

Bài viết này là một hướng dẫn ngắn gọn và nhanh chóng về cách sử dụng các thuộc tính dữ liệu trong JavaScript— điều mà tôi ước mình biết nhiều hơn khi bắt đầu hành trình JavaScript của riêng mình

Thuộc tính dữ liệu là gì?

Thuộc tính dữ liệu thực sự là các thuộc tính HTML cho phép bạn tạo và gán các điểm dữ liệu riêng cho các phần tử HTML. Chúng có thể truy cập được thông qua HMTL, CSS và JavaScript, khiến chúng trở thành một lựa chọn mạnh mẽ để lưu trữ các mẩu thông tin có thể không phù hợp với danh sách ________ 3 hoặc ________ 4. Rốt cuộc, chúng ta nên đặt mục tiêu giữ các thuộc tính class và id dành riêng cho mục đích tạo kiểu, nếu không, mọi thứ có thể trở nên rất lộn xộn và khó hiểu một cách nhanh chóng

Thuộc tính dữ liệu trong HTML

Xác định các thuộc tính dữ liệu trong HTML khá dễ dàng, chỉ cần tìm bất kỳ thứ gì trong các thẻ phần tử HTML có data-something. Trong trường hợp này, something có thể là bất cứ thứ gì bạn muốn mặc dù cách tốt nhất là đặt tên nó một cách rõ ràng để bạn và các lập trình viên khác sử dụng mã của bạn có thể dễ dàng biết loại thông tin nào đang được lưu trữ trong thuộc tính dữ liệu đó. Để tạo một thuộc tính dữ liệu trong HTML, chỉ cần bắt đầu thuộc tính đó bằng data- và chọn một tên phù hợp với bạn. Bạn sẽ muốn sử dụng toán tử gán,

/* content of pseudo-element will be set to the current value of "data-point" */
#container::before {
	content: attr(data-point);
}

0 , để đặt giá trị thuộc tính dữ liệu thành

/* content of pseudo-element will be set to the current value of "data-point" */
#container::before {
	content: attr(data-point);
}

1. Nếu thuộc tính dữ liệu của bạn yêu cầu hai từ trở lên, chỉ cần thêm dấu gạch ngang giữa mỗi từ. Ví dụ: Nếu tôi muốn tạo một thuộc tính dữ liệu có tên là “id huấn luyện viên”, tôi sẽ viết nó là

/* content of pseudo-element will be set to the current value of "data-point" */
#container::before {
	content: attr(data-point);
}

2 trong phần tử HTML mong muốn

Trong đoạn mã dưới đây, chúng ta có thể thấy ví dụ này được mã hóa cứng vào HTML. Tôi quyết định thêm các thuộc tính dữ liệu vào các id0 khác nhau trong danh sách không theo thứ tự của mình để tôi có thể liên kết id người huấn luyện của từng pokemon. Bằng cách này, tôi có thể dễ dàng truy xuất thông tin về pokemon thuộc về huấn luyện viên nào và nhanh chóng áp dụng các thay đổi JavaScript hoặc CSS khi cần

Ảnh chụp màn hình Chrome devTools hiển thị các thuộc tính dữ liệu được liên kết với từng phần tử li

Thuộc tính dữ liệu sẽ không xuất hiện trong trình duyệt của bạn, vì vậy không cần phải lo lắng nếu người dùng của chúng tôi sẽ nhìn thấy nó

Tạo tập dữ liệu trong JavaScript

Mặc dù bạn có thể mã hóa cứng các thuộc tính dữ liệu của mình trong HTML, nhưng cách tốt nhất là tạo chúng trong JavaScript để các giá trị vẫn động. Dưới đây là ảnh chụp màn hình thuộc tính dữ liệu được tạo như một phần của phần tử id1

Phân tích nhanh những gì đang xảy ra trong đoạn mã trên để biết thêm ngữ cảnh

• Hàm id2 đang nhận tham số id3, là một mảng các đối tượng trong trường hợp này
• Sau đó, hàm sẽ áp dụng phương thức id4 để lặp qua từng đối tượng trong mảng id3
• Trong mỗi lần lặp lại, chúng tôi đang tạo một phần tử id0 và điền vào đó các thuộc tính id7 và id8 của phần tử đó, cũng như tạo một id1 có thuộc tính dữ liệu trỏ đến phần tử đó id. Trong trường hợp này, thuộc tính dữ liệu được gọi là class1

** Phù *** ok, quay lại thuộc tính dữ liệu…

Trong trường hợp này, chúng tôi vẫn đang mã hóa cứng mã HTML cho thuộc tính dữ liệu nhưng áp dụng động giá trị của thuộc tính đó. Làm điều này trong tệp JavaScript của chúng tôi cho phép chúng tôi kiểm soát nhiều hơn, tính linh hoạt và khả năng sử dụng đối với các thuộc tính dữ liệu. BUUUUT, chúng ta có thể làm điều này tốt hơn…

Sử dụng thuộc tính dữ liệu trong JavaScript

Chúng ta thực sự có thể sử dụng ký hiệu dấu chấm trong JavaScript để tạo và gán các thuộc tính dữ liệu, tất cả chỉ cần thay đổi một chút trong cú pháp. Khi sử dụng JavaScript, giờ đây chúng tôi làm việc với class2 thay vì data- và chúng tôi chuyển sang trường hợp lạc đà, class4, khi tạo thuộc tính dữ liệu có nhiều hơn một từ

Trong đoạn mã trên, chúng tôi đã giữ cho nó đơn giản và gán cho phần tử class5 một thuộc tính dữ liệu của id. Điều này được thực hiện bằng cách sử dụng ký hiệu dấu chấm, class7, theo sau là tên mong muốn cho thuộc tính. Nếu chúng ta muốn sử dụng ký hiệu dấu chấm để tạo hoặc gán một thuộc tính dữ liệu có nhiều hơn một từ, chẳng hạn như “id huấn luyện viên”, thì nó sẽ giống như thế này. class8. Kết quả trong HTML sẽ giống hệt như ví dụ đầu tiên của chúng tôi, nơi chúng tôi mã hóa cứng thuộc tính dữ liệu vào thẻ phần tử

Ảnh chụp màn hình cho thấy việc tạo một phần tử mới, newLi và một thuộc tính dữ liệu mới có tên là “id huấn luyện viên”

Khi class9 của tôi được thêm vào DOM, tôi có thể tìm kiếm nút đó bằng các kỹ thuật truyền tải DOM truyền thống, chẳng hạn như id0…

Được sử dụng. querySElector để tìm thuộc tính dữ liệu mà chúng ta vừa đặt

Hoặc, nếu chúng ta đã có phần tử trong tay, chúng ta có thể kiểm tra thuộc tính dữ liệu của nó bằng cách sử dụng lại ký hiệu dấu chấm

Bảng điều khiển trả về đối tượng DOMStringMap nơi lưu trữ các thuộc tính dữ liệu trong JavaScript

Đừng lo lắng về id1 trong ảnh chụp màn hình ở trên, đó chỉ là giao diện được sử dụng cho HTML. thuộc tính tập dữ liệu (hay còn gọi là, chúng tôi nhận được class7 từ id1)

Thuộc tính dữ liệu trong CSS

Cuối cùng, vì các thuộc tính dữ liệu chỉ là các thuộc tính HTML đơn giản, nên chúng ta cũng có thể sử dụng các thuộc tính dữ liệu này trong CSS. Ví dụ: chúng tôi có thể nhắm mục tiêu các phần tử id0 có id5 và id6 để áp dụng các thay đổi về kiểu tùy thuộc vào id của huấn luyện viên

Thuộc tính dữ liệu nhắm mục tiêu CSS của các giá trị cụ thể để thay đổi kiểu

Phần kết luận

TLDR; . Thuộc tính dữ liệu có thể được tạo và gán trong HTML hoặc JavaScript bằng cú pháp sau

• HTML. id9 (dùng dấu gạch ngang)
• JavaScript. data-something0 (sử dụng. tập dữ liệu và camelCase)

Các thuộc tính dữ liệu có thể được truy cập thông qua ký hiệu dấu chấm hoặc sử dụng các kỹ thuật truyền tải DOM như id0

Thuộc tính dữ liệu trong CSS là gì?

Làm cách nào để lấy giá trị thuộc tính dữ liệu trong CSS?

Làm cách nào để sử dụng nội dung thuộc tính dữ liệu trong CSS?

Ví dụ về thuộc tính dữ liệu là gì?