Microdata and Custom Data - HTML5 - page 134

getAttribute() . Here's the for loop using fallback logic and getAttribute() when
necessary:
for (i=0; i < cars.length; i++) {
if (cars[i].dataset) {
output += cars[i].dataset.color;
} else {
output += cars[i].getAttribute("data-color");
}
if (i != (cars.length-1)) {
output += ", "
}
}

Table 6-1. Dataset API support

IE Firefox Chrome Safari Opera iOS Android

— 6+ 7+ 5.1+ 11.1+ — —

To keep up with dataset API support, check http://caniuse.com/dataset
regularly.

See Also
The itemprop attribute in the HTML5 specification at http://www.w3.org/TR/html5/
microdata.html#names:-the-itemprop-attribute .

6.5 Manipulating Custom Data

Problem
You want to manipulate existing custom data in your page or add custom data to your
page.

Solution
Let's build on the code from Recipe 6.4 . We'll use the same markup to start:
<h1>My Volkswagens</h1>
<ul>
<li data-year="1996" data-color="white" data-engine="VR6">Cabrio</li>
<li data-year="1993" data-color="purple" data-engine="VR6">Corrado</li>
<li data-year="2008" data-color="red" data-engine="2.0T">Eos</li>
<li data-year="2003" data-color="blue" data-engine="W8">Passat</li>
</ul>
<p></p>