Bài viết
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ụ:
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
DVMS chuyên:
- Tư vấn, xây dựng, chuyển giao công nghệ Blockchain, mạng xã hội,...
- Tư vấn ứng dụng cho smartphone và máy tính bảng, tư vấn ứng dụng vận tải thông minh, thực tế ảo, game mobile,...
- Tư vấn các hệ thống theo mô hình kinh tế chia sẻ như Uber, Grab, ứng dụng giúp việc,...
- Xây dựng các giải pháp quản lý vận tải, quản lý xe công vụ, quản lý xe doanh nghiệp, phần mềm và ứng dụng logistics, kho vận, vé xe điện tử,...
- Tư vấn và xây dựng mạng xã hội, tư vấn giải pháp CNTT cho doanh nghiệp, startup,...
Vì sao chọn DVMS?
- DVMS nắm vững nhiều công nghệ phần mềm, mạng và viễn thông. Như Payment gateway, SMS gateway, GIS, VOIP, iOS, Android, Blackberry, Windows Phone, cloud computing,…
- DVMS có kinh nghiệm triển khai các hệ thống trên các nền tảng điện toán đám mây nổi tiếng như Google, Amazon, Microsoft,…
- DVMS có kinh nghiệm thực tế tư vấn, xây dựng, triển khai, chuyển giao, gia công các giải pháp phần mềm cho khách hàng Việt Nam, USA, Singapore, Germany, France, các tập đoàn của nước ngoài tại Việt Nam,…
Quý khách xem Hồ sơ năng lực của DVMS tại đây >>
Quý khách gửi yêu cầu tư vấn và báo giá tại đây >>