Css lấy giá trị 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 theo 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ị

[thuộc tính. bộ chọn =value] được sử dụng để chọn các phần tử có thuộc tính được chỉ định bắt đầu bằng giá trị được chỉ định

Ghi chú. Giá trị phải là một từ nguyên vẹn, đơn lẻ như lang="en" hoặc theo sau là dấu gạch ngang ( - ), như lang="en-us"

Suy nghĩ đầu tiên của bạn từ tiêu đề này có lẽ là bạn nghĩ rằng tôi đang bảo bạn sử dụng các thuộc tính dữ liệu làm bộ chọn trong CSS của bạn như thế này [data-attribute] { color: white }, nhưng trên thực tế, tôi đang nói về việc sử dụng giá trị của các thuộc tính dữ liệu làm nội dung cho CSS của bạn. Bạn có thể làm điều này bằng cách sử dụng hàm attr() trong CSS. Hàm này sẽ trả về giá trị của bất kỳ thuộc tính dữ liệu nào mà sau đó có thể được sử dụng trong CSS. Để giải thích điều này hơn nữa, hãy sử dụng ví dụ dưới đây

Hãy tưởng tượng có một nút thông báo trong ứng dụng của bạn sẽ hiển thị số lượng thư chưa đọc trong bong bóng

Đây là một vấn đề khá phổ biến và có thể được giải quyết bằng cách tạo một số HTML giống như thế này

<div class="container">
  <button>Bell Iconbutton>
  <span class="badge">5span>
div>

và một số CSS như thế này

.container {
  position: relative;
}
.badge {
  position: absolute;
  top: -0.75em;
  right: -0.75em;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: red;
  color: white;
}

Điều này sẽ cho kết quả chính xác, nhưng nó khá cồng kềnh vì có một lớp bọc xung quanh nút của chúng ta và khoảng thời gian bổ sung để chứa bộ đếm huy hiệu. May mắn thay, bằng cách sử dụng hàm attr(), chúng ta có thể làm điều này dễ dàng hơn nhiều. Thay vì có bất kỳ trình bao bọc nào, HTML của chúng tôi sẽ chỉ là một nút duy nhất

<button data-notification-count="5">Bell Iconbutton>

Thay vì có tất cả mã bổ sung cho huy hiệu thông báo, chúng tôi chỉ sử dụng thuộc tính dữ liệu chứa số lượng. Bây giờ trong CSS, chúng ta có thể sử dụng hàm attr() để tính số đó

[data-notification-count] {
  position: relative;
}
[data-notification-count]::before {
  content: attr(data-notification-count);
  position: absolute;
  top: -0.75em;
  right: -0.75em;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: red;
  color: white;
}

Sự khác biệt thực sự duy nhất giữa CSS trước đó và CSS mới là phần tử nút đóng vai trò là trình bao bọc cho số đếm nên nó được định vị tương đối. Sau đó, phần tử before của nút đang được sử dụng làm khoảng huy hiệu từ ví dụ trước và số lượng huy hiệu đang được đặt bằng cách sử dụng thuộc tính nội dung của phần tử before. Nếu bạn không quen thuộc với thuộc tính nội dung, thì về cơ bản, nó chỉ đặt nội dung bên trong phần tử thành bất kỳ văn bản nào bạn đặt thuộc tính đó. Trong trường hợp này, nội dung đang được thay đổi động thông qua thuộc tính dữ liệu của HTML. Điều này thật tuyệt vời vì nó đơn giản hóa đáng kể mã HTML, nhưng nó cũng giúp dễ dàng thay đổi số đếm động hơn thông qua JavaScript vì chỉ cần cập nhật thuộc tính dữ liệu và số đếm sẽ tự động thay đổi

Bây giờ tôi chắc chắn rằng đầu bạn đang chạy đua với những thứ hay ho mà bạn có thể làm với hàm attr(), chẳng hạn như tự động thiết lập kích thước của một phần tử như thế này

<div data-length="10%">div>

________số 8_______

Đáng tiếc là điều này chưa được hỗ trợ trong CSS. Hiện tại, chỉ có thể đặt thuộc tính nội dung bằng hàm attr(), nhưng loại chức năng này được lên kế hoạch cho tương lai của CSS. Trong tương lai, attr() sẽ có thể lấy một loại để thay vì trả về một chuỗi, nó thực sự có thể trả về một loại đơn vị cụ thể như thế này

.container {
  position: relative;
}
.badge {
  position: absolute;
  top: -0.75em;
  right: -0.75em;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: red;
  color: white;
}

3. Điều này sẽ yêu cầu thuộc tính

.container {
  position: relative;
}
.badge {
  position: absolute;
  top: -0.75em;
  right: -0.75em;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: red;
  color: white;
}

4 được đặt và sau đó nó sẽ chuyển đổi giá trị đó thành màu. Tất nhiên, đây chỉ là một tính năng thử nghiệm của CSS và chưa có trình duyệt nào hỗ trợ tính năng này. Nếu bạn muốn đọc thêm về các trường hợp sử dụng thử nghiệm, bạn có thể xem tài liệu MDN

Do những hạn chế của chức năng này, nó bị hạn chế trong việc sử dụng, nhưng nó vẫn tuyệt vời trong các trường hợp như biểu tượng thông báo hoặc mẹo công cụ đơn giản

Cách lấy giá trị thuộc tính dữ liệu trong js?

Làm cách nào tôi có thể lấy thuộc tính ID dữ liệu?

Tôi có thể sử dụng dữ liệu trong CSS không?