dope is cross-browser JavaScript module for working with HTML attributes. It includes an HTML5 dataset API abstraction that adheres to the specification. It works standalone or can integrate into jQuery-compatible hosts. It runs screamin-fast and gzips < 2k. Got data? =)
API (2.2)
In standalone usage, methods are available on the dope namespace. The docs below use $ to denote dope or a host library like jQuery or ender.
dope.dataset(document.body, 'foo', 'bar'); // standalone
$.dataset(document.body, 'foo', 'bar'); // integrated$(elem).attr(key) // get attribute on elem (or 1st elem in collection)
$(elem).attr(key, value) // set attribute on elem (or on collection)
$(elem).attr(object) // set multiple attributes via key/value pairs$(elem).removeAttr(keys) // remove 1 or more SSV attributes from elem or collection$(elem).dataset() // get all data-* attributes on elem (or 1st elem in collection)
$(elem).dataset(key) // get data-* attribute on elem (or 1st elem in collection)
$(elem).dataset(key, value) // set data-* attribute on elem (or on collection)
$(elem).dataset(object) // set multiple data-* attributes via key/value pairs
$(elem).dataset([key]) // get [exact] data-* attribute (primitives render to correct type)$(document.body).dataset('movieName', Pulp Fiction) // set <body data-movie-name="Pulp Fiction">
$(document.body).dataset('movieName') // returns "Pulp Fiction"
$('div').dataset('stars', 5) // set <div data-stars="5"> on all matched divs
$('div').dataset('stars') // returns "5"
$('div').dataset(['stars']) // returns 5$(elem).deletes(keys) // remove 1 or more SSV data-* attributes from elem or collection$(document.body).deletes('movieName') // remove [data-movie-name] from the <body> element$.attr(elem, key) // get attribute on elem
$.attr(elem, key, value) // set attribute on elem
$.attr(elem, object) // set multiple attributes via key/value pairs$.removeAttr(elem, keys) // remove 1 or more SSV attributes from elem (or from collection)$.dataset(elem) // get all data-* attrs on elem
$.dataset(elem, key) // get data-* attribute on elem
$.dataset(elem, key, value) // set data-* attribute on elem
$.dataset(elem, object) // set multiple data-* attributes via key/value pairs
$.dataset(elem, [key]) // get [exact] data-* attribute (primitives parse to correct type)$.dataset(document.body, 'movieName', Pulp Fiction) // set <body data-movie-name="Pulp Fiction">
$.dataset(document.body, 'movieName') // returns "Pulp Fiction"$.deletes(elem, keys) // remove 1 or more SSV data-* attributes from elem (or from collection)$.deletes(document.body, 'movieName') // remove [data-movie-name] from the <body> element$.queryData(keys) // get elements by data key (keys can be an array or CSV or SSV string)$.queryData('miaWallace vincentVega') // Delegate to $("[data-mia-wallace],[data-vincent-vega]")$.trim(str) // Trim surrounding whitespace.$.parse(str) // Convert stringified primitives to correct value. Non-strings are unchanged.
$.parseJSON(str) // Parse JSON. Safely wraps `JSON.parse` so that it won't throw an error.$.parse and $.parseJSON trim "string" inputs before parsing them.
$.parse('yo') // 'yo'
$.parse('10') // 10
$.parse('true') // true
$.parse('null') // null
$.parse('undefined') // undefined
$.parse('Infinity') // Infinity
$.parse('NaN') // NaN$.camelize(str) // convert a dashed data- string into camelCase$.camelize('data-mia-wallace') // 'miaWallace'
$.camelize('mia-wallace') // 'miaWallace'
$.camelize(47) // '47'$.datatize(str) // convert a camelized string into a lowercase dashed data- attribute name$.datatize('miaWallace') // 'data-mia-wallace'
$.datatize(47) // 'data-47'
$.datatize(0) // 'data-0'
$.datatize(null) // ''
$.datatize('') // ''
$.datatize(undefined) // ''AMD usage
define('dope', function() {
return dope;
});Supports all major browsers. Tested in Chrome, FF3+, IE7+, Opera, and Safari.
- atts: attributes module
MIT