DEVELOPER TRAINING

  • Trang chủ
  • Khóa học
  • Tutorials
    • React Native
  • Đăng ký
  • Tài liệu
    • Thường thức iPhone
    • Mạng xã hội , Social Network
    • Android, ios, Windows phone, Blackberry
    • CRM
    • ERP
    • Joomla, Wordpress, Drupal...
    • Codeigniter, Zend, Phalcon...
    • Magento, Prestashop, opencart ...
    • Tài liệu khác
  • Tuyển dụng
    • Tìm người cùng khởi nghiệp
    • Tuyển thực tập lập trình
  • Chuyển đổi số
    • Chuyển đổi số
    • Kinh tế số
    • Kinh tế chia sẻ
    • Fintech
    • Mạng xã hội
    • insurtech
    • Bất động sản 4.0

Tài liệu lập trình, tài liệu triển khai CRM, tài liệu triển khai ERP, tài liệu marketing

Tài liệu

Sử dụng Data attribute trong HTML

  • Print

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

  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

kipalog

Có thể bạn chưa biết:
  1. Hacker và những âm mưu can thiệp chính trị thế giới
  2. Di động đã cứu Nintendo (Pokemon GO) và giết chết Yahoo như thế nào?
  3. 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
  4. Atlassian UI – Thư viện frontend phù hợp cho những webiste hệ thống hay layout admin
  5. 100 Website đặt backlink miễn phí chất lượng
  6. Thiết bị di động chiếm 20% lưu lượng mua sắm trực tuyến
  7. Bao lâu thì nên cập nhật app 1 lần?
  8. Hack tài khoản Facebook, Twitter... trong nháy mắt
  9. 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
  10. Tìm điện thoại bằng Android Device Manager
  11. 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
  12. 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

  • Prev
  • Next
  • tweet

Nhiều người quan tâm

  • Mã nguồn mạng xã hội giống y Facebook
  • Tìm co-founder cho các dự án khởi nghiệp
  • Phương pháp giải quyết phản bác
  • Gần 700 forum, trang rao vặt giúp tăng độ phủ quảng cáo, SEO, Backlink
  • Danh sách 6.500 website mua bán rao vặt, tốt để quảng cáo, SEO và tạo backlink
  • Top danh sách hơn 300 website submit PR cao

Tin mới

Internet và các khái niệm cơ bản 13 December 2018
Ứng dụng công nghệ di động vào giám sát phương tiện và đảm bảo ATGT 03 August 2015
Làm thế nào để phát triển hệ thống báo cáo hoạt động trên mạng xã hội 20 March 2018
Kinh tế chia sẻ và tiềm năng cho Việt Nam 08 December 2015
GitHub thêm cảnh báo bảo mật cho Java và .NET 09 January 2019
Huấn luyện kỹ năng bán hàng 20 December 2017

Blogs

  • app SOS, gọi nhanh tới các số hỗ trợ (đường dây nóng) tại Việt Nam
  • Kiểm soát đường huyết bằng smartphone và tablet
  • Tự động Kiểm tra thông tin người gọi đến | Call Look
  • Giải pháp xem truyền hình trên smartphone
  • Happy Life - Cuộc sống mạnh khỏe và hạnh phúc hơn
  • Khám phá những điều bí ẩn của vũ trụ

Lập trình ứng dụng di động

  • Lập trình Android
  • Lập trình iOS
  • Lập trình Windows Phone
  • Lập trình BlackBerry OS
  • Lập trình BlackBerry 10
  • Lập trình J2ME
  • Lập trình game mobile
  • Đồ họa cho ứng dụng
  • Lập trình Phonegap
  • Lập trình Unity 3D
  • Lập trình Xamarin
  • Lập trình web mobile
  • Lập trình Node js

Học lập trình

  • Lập trình .NET
  • Lập trình C/C++
  • Visual C++
  • Visual C#
  • Lập trình Visual Basic
  • Visual Basic .NET
  • Lập trình Java
  • Lập trình trên Linux
  • Công cụ, ebooks .NET
  • Dự án lập trình .NET
  • Hỏi đáp về lập trình
  • Hướng dẫn cho người mới
  • Thủ thuật
  • Hỏi đáp tin học

Lập trình web

  • Lập trình PHP
  • Flash và các vấn đề
  • Thiết kế web
  • Lập trình web JSP
  • Lập trình web ASP
  • Lập trình web ASP.NET
  • HTML - CSS
  • Webmaster/ SEO
  • JavaScript / Ajax, jQuery
  • Lập trình Phalcon

Cơ sở dữ liệu

  • MS SQL Server
  • MySQL
  • Oracle
  • Các hệ CSDL khác
  • Bigdata
  • Blockchain

OpenSource Master

  • Lập trình và quản trị Joomla
  • Lập trình và quản trị Wordpress
  • Lập trình và quản trị Drupal
  • Lập trình và quản trị SugarCRM
  • Lập trình và quản trị VTigerCRM
  • Lập trình và quản trị Open ERP
  • Lập trình và quản trị Dolibarr ERP

 

Copyright © Tạo Ứng Dụng, All Rights Reserved. Developed By DVMS | All solution for smartphone & tablet.. Designed By JoomShaper

Tìm kiếm

  • Trang chủ
  • Khóa học
  • Tutorials
    • React Native
  • Đăng ký
  • Tài liệu
    • Thường thức iPhone
    • Mạng xã hội , Social Network
    • Android, ios, Windows phone, Blackberry
    • CRM
    • ERP
    • Joomla, Wordpress, Drupal...
    • Codeigniter, Zend, Phalcon...
    • Magento, Prestashop, opencart ...
    • Tài liệu khác
  • Tuyển dụng
    • Tìm người cùng khởi nghiệp
    • Tuyển thực tập lập trình
  • Chuyển đổi số
    • Chuyển đổi số
    • Kinh tế số
    • Kinh tế chia sẻ
    • Fintech
    • Mạng xã hội
    • insurtech
    • Bất động sản 4.0