HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.data() data-* attributes</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 480px; }
    #page {
      padding: 14px; background: #ecfdf5; border: 1px solid #a7f3d0;
      border-radius: 8px; margin-bottom: 12px;
    }
    #out { padding: 12px; background: #f1f5f9; border-radius: 6px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <div id="page"
    data-role="page"
    data-last-value="43"
    data-hidden="true"
    data-options='{"name":"John"}'>
    Element with data-* attributes
  </div>
  <div id="out"></div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    var $p = $( "#page" );
    $( "#out" ).text(
      "role: " + $p.data( "role" ) +
      "\nlastValue: " + $p.data( "lastValue" ) + " (" + typeof $p.data( "lastValue" ) + ")" +
      "\nhidden: " + $p.data( "hidden" ) + " (" + typeof $p.data( "hidden" ) + ")" +
      "\noptions.name: " + $p.data( "options" ).name
    );
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .data() — HTML5 data-* (Try It)