mozilla

Compare Revisions

Using data attributes

Change Revisions

Revision 461041:

Revision 461041 by groovecoder on

Revision 461043:

Revision 461043 by groovecoder on

Title:
Using data-* attributes
Using data-* attributes
Slug:
Web/Guide/HTML/Using_data_attributes
Web/Guide/HTML/Using_data_attributes
Tags:
"HTML", "HTML5"
"HTML", "HTML5"
Content:

Revision 461041
Revision 461043
n14      The syntax is dead easy. Say you have an article and you wan14      The syntax is easy. Say you have an article and you want to
>nt to store some extra information that doesn’t have any visual r> store some extra information that doesn’t have any visual repres
>epresentation. Just use data attributes for that:>entation. Just use data attributes for that:
n31    <div class="wp_syntax">n31    <pre class="brush: js">
32      <table>32var article = document.querySelector('#electriccars'),
33        <tbody>33              data = article.dataset;
34          <tr>
35            <td class="code">
36              <pre class="javascript" style="font-family:monospac
>e;"> 
37<span style="color: #000066; font-weight: bold;">var</span> artic
>le <span style="color: #339933;">=</span> document.<span style="c 
>olor: #660066;">querySelector</span><span style="color: #009900;" 
>>(</span><span style="color: #3366CC;">'#electriccars'</span><spa 
>n style="color: #009900;">)</span><span style="color: #339933;">, 
></span> 
38              data <span style="color: #339933;">=</span> article
>.<span style="color: #660066;">dataset</span><span style="color:  
>#339933;">;</span> 
n40<span style="color: #006600; font-style: italic;">// data.columnsn35// data.columns -&gt; "3"
> -&gt; "3"</span> 
41<span style="color: #006600; font-style: italic;">// data.indexnu36// data.indexnumber -&gt; "12314"
>mber -&gt; "12314"</span> 
42<span style="color: #006600; font-style: italic;">// data.parent 37// data.parent -&gt; "cars"
>-&gt; "cars"</span> 
t44            </td>t
45          </tr>
46        </tbody>
47      </table>
48    </div>

Back to History