Hướng dẫn đầy đủ về Data Attributes
Admins
---
<!-- We can use the `class` for styling in CSS, and we've also make this into a landmark region --> <div class="names" role="region" aria-label="Names"></div>
<!-- `highlight` is not an HTML attribute --> <div highlight="true"></div> <!-- `large` is not a valid value of `width` --> <div width="large">
Cú pháp
Sẽ rất hữu ích khi có thể tạo các thuộc tính HTML của riêng bạn và đưa thông tin của riêng bạn vào bên trong chúng. May mắn thay, bạn có thể! Đó chính xác là những gì thuộc tính data. Chúng như thế này:<!-- They don't need a value --> <div data-foo></div> <!-- ...but they can have a value --> <div data-size="large"></div> <!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside --> <li data-prefix="Careful with HTML in here."><li> <!-- You can keep dashing if you like --> <aside data-some-long-attribute-name><aside>
Bạn có thể sử dụng thuộc tính data một mình không?
Nó có thể sẽ không ảnh hưởng gì, nhưng bạn sẽ không nhận được JavaScript API mà chúng tôi sẽ đề cập ở phần sau của hướng dẫn này. Về cơ bản, bạn đang tạo ra một thuộc tính cho chính mình, mà như tôi đã đề cập trong phần giới thiệu, không được khuyến khích.Không nên làm gì với các thuộc tính dữ liệu?
Lưu trữ nội dung có thể truy cập được. Nếu nội dung cần được xem hoặc đọc trên một trang, không chỉ đặt chúng trong các thuộc tính dữ liệu, mà hãy đảm bảo rằng nội dung đó nằm trong nội dung HTML ở đâu đó.<!-- This isn't accessible content --> <div data-name="Chris Coyier"></div> <!-- If you need programmatic access to it but shouldn't be seen, there are other ways... --> <div> <span class="visually-hidden">Chris Coyier</span> </div>
Tạo kiểu với các thuộc tính dữ liệu
/* Select any element with this data attribute and value */
[data-size="large"] {
padding: 2rem;
font-size: 125%;
}
/* You can scope it to an element or class or anything else */
button[data-type="download"] { }
.card[data-pad="extra"] { }/* Selects if the attribute is present at all */
[data-size] { }
/* Selects if the attribute has a particular value */
[data-state="open"],
[aria-expanded="true"] { }
/* "Starts with" selector, meaning this would match "3" or anything starting with 3, like "3.14" */
[data-version^="3"] { }
/* "Contains" meaning if the value has the string anywhere inside it */
[data-company*="google"] { }Ví dụ về trường hợp sử dụng tạo kiểu
<div data-columns="2"></div> <div data-columns="3"></div> <div data-columns="4"></div>
[data-columns] {
display: grid;
grid-gap: 1rem;
padding: 1rem;
margin: 0 0 1rem 0;
}
[data-columns] > div {
height: 100px;
background: white;
}
[data-columns="2"] {
background: #64B5F6;
grid-template-columns: repeat(2, 1fr);
}
[data-columns="3"] {
background: #9CCC65;
grid-template-columns: repeat(3, 1fr);
}
[data-columns="4"] {
background: #FFB74D;
grid-template-columns: repeat(4, 1fr);
}
body {
margin: 1rem;
}Truy cập các thuộc tính dữ liệu trong JavaScript
Giống như bất kỳ thuộc tính nào khác, bạn có thể truy cập giá trị bằng phương thức chung getAttribute.let value = el.getAttribute("data-state");
// You can set the value as well.
// Returns data-state="collapsed"
el.setAttribute("data-state", "collapsed");<span data-info="123" data-index="2" data-prefix="Dr. " data-emoji-icon="🏌️♀️" ></span>
// Get span.dataset.info; // 123 span.dataset.index; // 2 // Set span.dataset.prefix = "Mr. "; span.dataset.emojiIcon = "🎪";
Dữ liệu JSON bên trong các thuộc tính dữ liệu
<ul>
<li data-person='
{
"name": "Chris Coyier",
"job": "Web Person"
}
'></li>
</ul>const el = document.querySelector("li");
let json = el.dataset.person;
let data = JSON.parse(json);
console.log(data.name); // Chris Coyier
console.log(data.job); // Web Person
Đăng nhận xét
Đăng nhận xét