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

Tuy nhiên, không nên tạo ra các thuộc tính của riêng bạn cũng như gán cho các thuộc tính sẵn có giá trị không hợp lý. It will not error, only is also not run

Chúng ta có thể tạo ra các thuộc tính của riêng mình bằng 1 cách khác, khá đơn giản, chỉ cần thêm

0 làm tiền tố, và bạn có thể muốn làm gì thì làm. Đó cũng chính là thuộc tính dữ liệu mà mình muốn nói đến trong bài viết này

cú pháp

Cách này khá hữu ích khi bạn muốn lưu thông tin vào trong thẻ HTML như sau

Thuộc tính dữ liệu hay còn được gọi là thuộc tính

0 vì cú pháp của nó lúc nào cũng như vậy

Có thể chỉ viết mỗi

2 không?

Cũng không ảnh hưởng gì, những thứ sẽ không được sử dụng, giống như trong đầu bài viết mình có nói, bạn đang cố gắng tạo ra 1 thuộc tính của riêng mình mà không hợp lệ

Điều không nên làm với thuộc tính dữ liệu

Không nên sử dụng thuộc tính dữ liệu để lưu trữ những giá trị không truy cập được, nếu chỉ đơn giản là muốn ẩn đi không cho người dùng thấy, bạn có thể để nó trong 1 thẻ HTML và sử dụng lớp

3

  Chris Coyier

Kiểu với thuộc tính dữ liệu

Ta có thể viết CSS cho phần tử HTML dựa trên thuộc tính và giá trị của chúng

________số 8_______

Thuộc tính value không phân biệt chữ hoa, chữ thường

Trong trường hợp bạn cần lấy tất cả văn bản không phân biệt chữ hoa, chữ thường, thì có thể chọn bằng cách

/* Khớp với




*/
[data-state="open" i] { }

Use data attribute direct

CSS cho phép bạn lấy giá trị trong thuộc tính dữ liệu ra và hiển thị nó nếu cần

/* 
 */

[data-emoji]::before {
  content: attr(data-emoji); /* Returns '✅' */
  margin-right: 5px;
}

Ví dụ về 1 cách style sử dụng thuộc tính dữ liệu

Bạn có thể sử dụng thuộc tính dữ liệu để chỉ định số lượng cột trong lưới

Truy cập thuộc tính dữ liệu trong JavaScript

Giống như bất kỳ thuộc tính kỳ nào khác, bạn có thể lấy giá trị của thuộc tính thông qua phương thức

4

let value = el.getAttribute("data-state");

// Bạn có thể set giá trị cho nó
// trả về giá trị của data-state="collapsed"
el.setAttribute("data-state", "collapsed");

Tuy nhiên, thuộc tính dữ liệu vẫn có API riêng của chúng. Giả sử bạn có 1 phần tử có nhiều thuộc tính dữ liệu

You can get or set value for it by way

0

Lưu ý là với những thuộc tính dữ liệu dài, thì ta sẽ viết kiểu camelCase thay cho dấu gạch dưới, giống như

5 thì viết là

6

Bạn cũng có thể truy xuất thuộc tính giá trị dữ liệu ngay trong HTML

1

Data JSON trong data attribute

2

Tại sao ko nhỉ? . Tương tự bạn cũng có thể lấy dữ liệu từ nó

3

Ví dụ trường hợp sử dụng JS

Ví dụ bạn có 1 nút Like

4

Nút đó sẽ bắt sự kiện bấm để gọi Ajax tới máy chủ tăng như trong cơ sở dữ liệu. Nó sẽ rất đơn giản vì ta có sẵn id trong thuộc tính dữ liệu

Làm cách nào để đặt thuộc tính dữ liệu trong HTML?

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

3 loại thuộc tính trong HTML là gì?

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