data-*

Els atributs globals data-* formen una classe d'atributs anomenats atributs de dades personalitzades, que permeten que la informació propietària s'intercanviï entre l' HTML i la seva representació DOM mitjançan scripts. Totes aquestes dades personalitzades estan disponibles a través de la interfície HTMLElement de l'element en el qual s'estableix l'atribut. La propietat HTMLElement.dataset li dóna accés. El * pot ser reemplaçat per qualsevol nom que segueix la regla de producció de noms XML amb les següents restriccions:

  • el nom no ha de començar amb xml, qualsevol que sigui el cas que s'utilitzi per a aquestes lletres;
  • el nom no ha de contenir cap punt i coma (U+003A);
  • el nom no ha de contenir majúscules de l'A a la Z.

Recordeu que la propietat HTMLElement.dataset és un DOMStringMap, i el nom de l'atribut de dades personalitzades data-test-value serà accessible a través de HTMLElement.dataset.testValue ( o HTMLElement.dataset["testValue"] ) com qualsevol guió (u+002D) se substitueix la següent lletra en majúscula, convertint el nom a (CamelCase).

Ùs

Mitjançant la incorpoarció d'atributs data-*, fins i tot els elements HTML ordinaris poden convertir-se en programes-objectes força complexos i potents. Per exemple, una nau espacial "sprite" en un joc podria ser un simple element <img> amb un atribut class i diversos atributs data- *:

<img class="spaceship cruiserX3" src="shipX3.png"
  data-ship-id="324"   data-weapons="laserI laserII"   data-shields="72%"
  data-x="414354" data-y="85160" data-z="31940"
  onclick="spaceships[this.dataset.shipId].blasted()"
</img>

(Veure més aquí)

Especificacions

Especificació Estat Comentari
HTML Living Standard
The definition of 'data-*' in that specification.		 Living Standard Sense canvis des de l'última instantània, HTML 5.1
HTML 5.1
The definition of 'data-*' in that specification.		 Recommendation Instantània de HTML Living Standard, sense canvis des de HTML5
HTML5
The definition of 'data-*' in that specification.		 Recommendation Instantània de HTML Living Standard, definició inicial.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic (Yes) 6 (6) (Yes) (Yes) (Yes)
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic (Yes) 6.0 (6) (Yes) (Yes) (Yes) (Yes)

Veure

Last modified:

, by MDN contributors
Related Topics
  1. HTML
  2. Tutorials:
  3. HTML basics
  4. Introduction to HTML
    1. Introduction to HTML overview
    2. Getting started with HTML
    3. What's in the head? Metadata in HTML
    4. HTML text fundamentals
    5. Creating hyperlinks
    6. Advanced text formatting
    7. Document and website structure
    8. Debugging HTML
    9. Assessment: Marking up a letter
    10. Assessment: Structuring a page of content
  5. Multimedia and embedding
    1. Multimedia and embedding overview
    2. Images in HTML
    3. Video and audio content
    4. From object to iframe — other embedding technologies
    5. Adding vector graphics to the Web
    6. Responsive images
    7. Assessment: Mozilla splash page
  6. References:
  7. HTML elements
    1. <a>
    2. <abbr>
    3. <acronym>
    4. <address>
    5. <applet>
    6. <area>
    7. <article>
    8. <aside>
    9. <audio>
    10. <b>
    11. <base>
    12. <basefont>
    13. <bdi>
    14. <bdo>
    15. <bgsound>
    16. <big>
    17. <blink>
    18. <blockquote>
    19. <body>
    20. <br>
    21. <button>
    22. <canvas>
    23. <caption>
    24. <center>
    25. <cite>
    26. <code>
    27. <col>
    28. <colgroup>
    29. <command>
    30. <content>
    31. <data>
    32. <datalist>
    33. <dd>
    34. <del>
    35. <details>
    36. <dfn>
    37. <dialog>
    38. <dir>
    39. <div>
    40. <dl>
    41. <dt>
    42. <element>
    43. <em>
    44. <embed>
    45. <fieldset>
    46. <figcaption>
    47. <figure>
    48. <font>
    49. <footer>
    50. <form>
    51. <frame>
    52. <frameset>
    53. Heading elements
    54. <head>
    55. <header>
    56. <hgroup>
    57. <hr>
    58. <html>
    59. <i>
    60. <iframe>
    61. <image>
    62. <img>
    63. <input>
    64. <ins>
    65. <isindex>
    66. <kbd>
    67. <keygen>
    68. <label>
    69. <legend>
    70. <li>
    71. <link>
    72. <listing>
    73. <main>
    74. <map>
    75. <mark>
    76. <marquee>
    77. <menu>
    78. <menuitem>
    79. <meta>
    80. <meter>
    81. <multicol>
    82. <nav>
    83. nextid
    84. <nobr>
    85. <noembed>
    86. <noframes>
    87. <noscript>
    88. <object>
    89. <ol>
    90. <optgroup>
    91. <option>
    92. <output>
    93. <p>
    94. <param>
    95. <picture>
    96. <plaintext>
    97. <pre>
    98. <progress>
    99. <q>
    100. <rb> [Traduir]
    101. <rp>
    102. <rt>
    103. <rtc>
    104. <ruby>
    105. <s>
    106. <samp>
    107. <script>
    108. <section>
    109. <select>
    110. <shadow>
    111. <slot> [Traduir]
    112. <small>
    113. <source>
    114. <spacer>
    115. <span>
    116. <strike>
    117. <strong>
    118. <style>
    119. <sub>
    120. <summary>
    121. <sup>
    122. <table>
    123. <tbody>
    124. <td>
    125. <template>
    126. <textarea>
    127. <tfoot>
    128. <th>
    129. <thead>
    130. <time>
    131. <title> [Traduir]
    132. <tr>
    133. <track>
    134. <tt>
    135. <u>
    136. <ul>
    137. <var>
    138. <video>
    139. <wbr>
    140. <xmp>
  8. Global attributes
    1. accesskey
    2. autocapitalize [Traduir]
    3. class
    4. contenteditable
    5. contextmenu
    6. data-*
    7. dir
    8. draggable
    9. dropzone
    10. hidden
    11. id
    12. inputmode [Traduir]
    13. is [Traduir]
    14. itemid
    15. itemprop
    16. itemref
    17. itemscope
    18. itemtype
    19. lang
    20. slot [Traduir]
    21. spellcheck
    22. style
    23. tabindex
    24. title
    25. translate
    26. x-ms-acceleratorkey [Traduir]
    27. x-ms-format-detection [Traduir]
  9. <input> types
    1. <input type="button"> [Traduir]
    2. <input type="checkbox"> [Traduir]
    3. <input type="color"> [Traduir]
    4. <input type="date"> [Traduir]
    5. <input type="datetime"> [Traduir]
    6. <input type="datetime-local"> [Traduir]
    7. <input type="email"> [Traduir]
    8. <input type="file"> [Traduir]
    9. <input type="hidden"> [Traduir]
    10. <input type="image"> [Traduir]
    11. <input type="month"> [Traduir]
    12. <input type="number"> [Traduir]
    13. <input type="password"> [Traduir]
    14. <input type="radio"> [Traduir]
    15. <input type="range"> [Traduir]
    16. <input type="reset"> [Traduir]
    17. <input type="search"> [Traduir]
    18. <input type="submit"> [Traduir]
    19. <input type="tel"> [Traduir]
    20. <input type="text"> [Traduir]
    21. <input type="time"> [Traduir]
    22. <input type="url"> [Traduir]
    23. <input type="week"> [Traduir]
    24. Date and time formats used with the input element [Traduir]
  10. Documentation:
  11. Useful lists
  12. All pages index
  13. Pages tagged "HTML"
  14. Contribute
    1. HTML doc status
    2. The MDN project