HTML5 Dataset jQuery Plugin

Introduction

The HTML5 specification allows custom data attributes to be added to any DOM element. Each custom attibute name must be prefixed with data-. An element's custom attributes may be conveniently accessed through element.dataset, a mapping of (name, value) items where each name is the custom attribute with the data- prefix removed.

This jQuery plugin adds the jQuery.fn.dataset method. It may be used in a similar manner to jQuery's built-in data and attr methods.

Download: jquery.dataset.js

Tested: FF, Safari, Chrome, Opera, IE6, IE7, IE8

Documentation

The use of "name" here means the name of a custom attribute without the data- prefix.

dataset()

Return an object with all custom attribute (name, value) items.

dataset(name)

Return the value of the attribute `data-NAME'.

dataset(name, value)

Set the value of attribtue `data-NAME' to VALUE.

dataset({…})

Set many custom attributes at once.

removeDataset(name)

Remove the attribute `data-NAME'.

removeDataset([n1, n2, …])

Remove the attributes `data-N1', `data-N2', …

Examples

Example 1: get one attribute value

$('#example-1').dataset('a');

Example 2: set one attribute value

$('#example-2').dataset('a', value);

Example 3: get all attribute values

$('#example-3').dataset();

Example 4: set many attribute values

$('#example-4').dataset({ ... });

Example 5: remove attribute values

$('#example-5').removeDataset(['a', ...]);