HTML and CSS Reference
In-Depth Information
and use the dataset API to modify and create our custom data, along with setAttri
bute() for fallback support:
var cars = document.getElementsByTagName("li");
for (var i=0; i < cars.length; i++) {
if (cars[i].dataset) {
cars[i].dataset.color = "yellow";
cars[i].dataset.rating = "awesome";
} else {
cars[i].setAttribute("data-color", "yellow");
cars[i].setAttribute("data-rating", "awesome");
var output = "What color are Kimberly's cars? ";
for (var 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 += ", "
document.getElementsByTagName("p")[0].innerHTML = output;
Once you know how to access custom data, manipulating it is pretty easy. If you can
use the dataset API, just assign the new value to the desired attribute; otherwise, fall
back to using setAttribute() . This same method allows you to add new custom data
attributes, as well.
In this example, we've decided to repaint all of the cars yellow using JavaScript. Looping
through the list items, we access dataset.color (or use setAttribute() to access data-
color ) and assign a new value of "yellow" .
We also use JavaScript to add a rating for each of the cars. In that same loop, we create
data-rating by applying a value of "awesome" to dataset.rating (or use setAttri
bute() to do the same).
If you need to remove a custom data attribute, you can do so by setting its value to
null . You can verify that the DOM is being manipulated by using a tool such as Opera
Dragonfly, as shown in Figure 6-2 .
See Also
The dataset specification at .
Search WWH ::

Custom Search