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ụ:
|
1
2
3
4
5
6
7
8
|
< span class = "hljs-tag" > & lt ; < span class = "hljs-title" > element < / span >
< span class = "hljs-attribute" > id < / span >= < span class = "hljs-value" > "el" < / span >
< span class = "hljs-attribute" > data - columns < / span >= < span class = "hljs-value" > "12" < / span >
< span class = "hljs-attribute" > data - name < / span >= < span class = "hljs-value" > "foo" < / span >
& lt ; / < span class = "hljs-attribute" > element < / span > & gt ; < / span >
|
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:
|
1
2
3
4
5
6
7
|
< span class = "hljs-keyword" > var < / span > element = < span class = "hljs-built_in" > document < / span > . getElementById ( < span class = "hljs-string" > 'el' < / span > ) ;
< span class = "hljs-built_in" > console < / span > . log ( element . dataset . columns ) < span class = "hljs-comment" > // 12</span>
< span class = "hljs-built_in" > console < / span > . log ( element . dataset . name ) < span class = "hljs-comment" > // foo</span>
|
Bạn hoàn toàn có thể set được giá trị Data attribute bằng cách sau:
|
1
2
3
4
5
|
< span class = "hljs-comment" > // Thay đổi giá trị thuộc tính data-columns = 20</span>
element . dataset . columns = < span class = "hljs-number" > 20 < / span >
|
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 selectortheo data attribute như sau:
|
1
2
3
4
5
6
7
8
9
|
< span class = "hljs-tag" > element < / span > < span class = "hljs-attr_selector" > [ data - columns = '10' ] < / span > < span class = "hljs-rules" > {
< span class = "hljs-rule" > < span class = "hljs-attribute" > background < / span > : < span class = "hljs-value" > red < / span > < / span > ;
< span class = "hljs-rule" > } < / span > < / span >
< span class = "hljs-tag" > element < / span > < span class = "hljs-attr_selector" > [ data - columns = '12' ] < / span > < span class = "hljs-rules" > {
< span class = "hljs-rule" > < span class = "hljs-attribute" > background < / span > : < span class = "hljs-value" > green < / span > < / span > ;
< span class = "hljs-rule" > } < / span > < / span >
|
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.
|
1
2
3
4
5
6
|
< span class = "hljs-tag" > element < / span > < span class = "hljs-pseudo" > : before < / span > < span class = "hljs-rules" > {
< span class = "hljs-rule" > < span class = "hljs-attribute" > content < / span > : < span class = "hljs-value" > < span class = "hljs-function" > attr < / span > ( data - name ) < / span > < / span > ;
< span class = "hljs-rule" > } < / span > < / span >
|
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
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
- https://developer.mozilla.org/en-US/docs/Web/CSS/content
kipalog
- Hacker và những âm mưu can thiệp chính trị thế giới
- Di động đã cứu Nintendo (Pokemon GO) và giết chết Yahoo như thế nào?
- Truyền năng lượng không dây, ứng dụng cho vệ tinh thu nhận năng lượng mặt trời truyền về Trái Đất
- Atlassian UI – Thư viện frontend phù hợp cho những webiste hệ thống hay layout admin
- 100 Website đặt backlink miễn phí chất lượng
- Thiết bị di động chiếm 20% lưu lượng mua sắm trực tuyến
- Bao lâu thì nên cập nhật app 1 lần?
- Hack tài khoản Facebook, Twitter... trong nháy mắt
- Phần mềm quản trị logistics nào dành cho bạn: Quản lý vận tải, Quản lý đội xe, hay Tối ưu hoá lộ trình
- Tìm điện thoại bằng Android Device Manager
- DVMS Hướng dẫn tạo danh mục sản phẩm trên joomla 3.x dùng chính component mặc định
- Kinh nghiệm lập trình, cảnh giới lập trình
Có thể bạn chưa biết:
TUYỂN THỰC TẬP REACT NATIVE
* Trang bị kỹ năng về JS, lập trình hybrid app, sử dụng những công cụ hỗ trợ (VScode, github, sourcetree, ...)
* Thành quả mong muốn là các bạn tham gia sẽ có được kỹ năng lập trình hybrid app
Biểu mẫu đăng ký training tại đây >> http://bit.ly/2NK9YWd
TEAM MOBILE APPS - CTY DVMS
