Sử dụng Data attribute trong HTML

Sử dụng data attribute trong HTML

Hôm nay trong lúc làm chức năng mới cho hệ thống Color ME, mình có dùng lại Data attribute trong HTML, tiện thể mình làm bài blog chia sẻ về sử dụng thuộc tính này

Cú pháp HTML

Tất cả mọi thuộc tính có tiền tố Data- đều là Data attribute. Data attribute sẽ giúp bạn lưu thêm thông tin vào thẻ html. Đặc biệt, Data attribute sẽ giúp các bạn có thể lấy được thông tin ra bằng javascript một cách nhanh chóng. Ví dụ:

<element
    id="el"
    data-columns="12"
    data-name="foo"
</element>

Cách lấy Data attribute bằng Javascript

Lấy dữ liệu ra trong từ Data attribute trong Javascript dễ như ăn bánh. Bạn hoàn toàn có thể dùng cách truyền thống là getAttribute() để lấy ra. Tuy nhiên, Bạn hoàn toàn có thể lấy ra bằng cách đơn giản như sau:

var element = document.getElementById('el');

console.log(element.dataset.columns) // 12
console.log(element.dataset.name) // foo

Bạn hoàn toàn có thể set được giá trị Data attribute bằng cách sau:

// Thay đổi giá trị thuộc tính data-columns = 20
element.dataset.columns = 20

Truy cập Data attribute bằng CSS

Data attribute cũng hoạt động như mội attribute thông thường. Bạn có thể thay đổi css bằng attribute selector theo data attribute như sau:

element[data-columns='10']{
    background:red;
}
element[data-columns='12']{
    background:green;
}

Trong ví dụ sau, mình sẽ lấy giá trị trong data attribute và set vào trong nội dung của thẻ element như sau.

element:before {
    content: attr(data-name);
}

Bạn có thể tìm hiểu thêm về thuộc tính content trong css ở đây

Cám ơn bạn đã đọc bài viết. Nếu mình có nhầm lẫn hoặc bạn có ý kiến đóng góp, xin vui lòng comment ở bên dưới.

  • Hãy kipalog nếu bài viết bổ ích với bạn.
  • Nhớ theo dõi mình để nhận được thông báo khi có bài viết mới

Nguồn thao khảo

  1. https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/content

QuanCao 19-04-2017

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Quân Cao

4 bài viết.
31 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
19 3
Sử dụng biến trong CSS Những website lớn thường sẽ sử dụng rất nhiều CSS với lượng lớn giá trị bị lặp lại. Giả sử khi bạn muốn sửa màu chủ đạo của...
Quân Cao viết 11 tháng trước
19 3
White
8 1
Scope Trong javascript có 2 loại scopes: lexical scope và block scope Lexical scope là không gian biến được khai báo ở trong hàm (function). Từ kh...
Quân Cao viết 11 tháng trước
8 1
White
8 7
Javascript Closure Closure là một hàm (function), trong hàm đó có sử dụng những biến độc lập (là biến được sử dụng locally trong hàm nhưng lại đượ...
Quân Cao viết 11 tháng trước
8 7
Bài viết liên quan
White
8 0
Lấy fake path của file trong html input Ngữ cảnh: em cần làm một cái nút tải ảnh lên có preview. GIải pháp đầu: Dùng (Link) đọc file ảnh thành ba...
Hoàng Duy viết gần 2 năm trước
8 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
4 bài viết.
31 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!