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
Có thể bạn quan tâm:
Điều hành hãng xe công nghệ, ứng dụng đặt xe trên smartphone tương tự Uber, Grab,...
Bạn cần xây dựng ứng dụng tìm và đặt xe, phương tiện giao thông... như Uber, Grab ?
DVMS đã có kinh nghiệm thực tế triển khai các hệ thống quản lý điều hành và đặt xe ... trên smartphone cho khách hàng trong và ngoài nước từ 2013 tới nay.
Các hệ thống app mà chúng tôi phát triển đều sử dụng native app cho từng hệ điều hành smartphone ( iOS , Android, Blackberry, Windows Phone ... ) và các thuật toán riêng của DVMS nghiên cứu phát triển vì vậy được khách hàng đánh giá cao về độ ổn định, bảo mật và tốc độ rất tốt, chính xác...
Xem mô tả và link download tại đây >>
MẠNG XÃ HỘI ĐỊA ĐIỂM | Tư vấn, xây dựng, chuyển giao & đồng hành
Tự động nhắc bảo dưỡng xe, thay nhớt... trên điện thoại và nhiều tiện ích khác cho người lái xe ô tô và xe máy.
Driver Plus cho phép bạn cài đặt để điện thoại hoặc máy tính bảng nhắc nhở bạn sắp tới ngày cần bảo dưỡng xe, sắp phải thay nhớt...
Quản lý mọi vấn đề liên quan tới xe của bạn, như thông tin ngày mua, số xe, loại xe, lịch sử thay nhớt, đổ xăng, nơi thay nhớt, nơi đổ xăng...
Chỉ cần mở Driver Plus lên là bạn dễ dàng Tìm nơi sửa xe, garage, tìm đại lý chính hãng gần nơi bạn đứng nhất. ứng dụng sẽ tự tìm theo hãng xe mà bạn đang đi. Ngoài ra bạn cũng có thể dùng Driver Plus để tìm cây xăng, trụ ATM, nơi đang có khuyễn mãi giảm giá... xung quanh khu vực bạn đang đứng...
Driver Plus giúp bạn ghi lại toàn bộ các lần đổ xăng , thay nhớt, thay và sửa chữa linh kiện xe. các thông tin như nơi thực hiện những việc đó, thời gian, chi phí... giúp bạn thống kê lại toàn bộ chi phí cho xe của bạn. phần thống kê có thể xuất ra file excel dạng .csv để bạn xem trên máy tính hoặc các thiết bị khác.
Driver Plus xuất bản phiên bản đầu tiên lên Google Play từ 2014.
Cài đặt ứng dụng và sử dụng miễn phí, an toàn khi sử dụng trên Google Play, tại đây >>
hoặc: Tải file APK tại đây >> hoặc cài qua mã QRCODE dưới
Website: http://driverplus.giaiphapgiaothong.com
Fanpage: https://www.facebook.com/pg/DriverPlus.GiaiPhapGiaoThong
* Ứng dụng của chúng tôi hoàn toàn miễn phí, chạy offline hoặc online, trên ứng dụng chỉ có banner quảng cáo của Google. Chúng tôi không thu thập dữ liệu người dùng, không cài cắm các phần mềm độc hại, không gây tốn pin,...
Có thể bạn quan tâm:
- Ứng dụng quản lý vận tải trên smartphone
- SChat là lựa chọn tuyệt vời nhất để trò chuyện và chăm sóc khách hàng của bạn
- Kinh doanh vé xe, đặt vé xe, vé máy bay trên smartphone, Smart TV, Mạng xã hội
- Chăm sóc khách hàng tại bệnh viện, phòng khám
- Phòng khám, bệnh viện thông minh
- Hệ thống catalog và brochre thông minh trên smartphone và tablet
- Tìm bất động sản, tìm nhà đất, tìm phòng theo mô hình uber trên smartphone
- Ứng dụng bán hàng trên smartphone, smart TV, mạng xã hội,...
- Nhà thông minh, tích hợp vi mạch
- SGo không còn xe trống chiều về
- Phần mềm CRM (phần mềm quản lý khách hàng) cho lĩnh vực vận tải, hậu cần thường gồm những gì?
- Hệ thống đánh giá thông minh trên smartphone và tablet
- Đặt món dễ dàng
- Ứng dụng smartphone và tablet cho ngành du lịch, travel, team building
- Ứng dụng công nghệ vào giáo dục (Edu Tech)
- Quản lý cửa hàng, ki ốt trên smartphone và tablet
- Chat, nhắn tin, gọi điện, đàm thoại
- App giúp việc và dịch vụ tại nhà, Tư vấn, xây dựng, chuyển giao, đồng hành cùng quý vị triển khai
- Ứng dụng quản lý garage trên smartphone và tablet
- Giải pháp Blockchain và câu chuyện minh bạch hóa tiền công đức
- Phát triển ứng dụng mobile trên sàn bất động sản, mạng xã hội BĐS, tìm BĐS theo mô hình uber
- App chăm sóc thú cưng, dịch vụ thú y
- Ứng dụng mobile để marketing và phân phối rượu vang
- Ứng dụng Smartphone cho thể dục & thể thao
Bằng cách đăng ký kênh và chia sẻ bài, bạn đã cùng DVMS chia sẻ những điều hữu ích
