{"id":264,"date":"2008-12-20T17:45:28","date_gmt":"2008-12-20T22:45:28","guid":{"rendered":"http:\/\/www.eligrey.com\/?p=264"},"modified":"2008-12-20T17:45:28","modified_gmt":"2008-12-20T22:45:28","slug":"html-5-dataset-support","status":"publish","type":"post","link":"https:\/\/eligrey.com\/blog\/html-5-dataset-support\/","title":{"rendered":"HTML 5 dataset support"},"content":{"rendered":"<p><strong>Update:<\/strong> Getting (not setting) data-* attributes through Element.dataset now works in IE8 with the help of <a href=\"http:\/\/github.com\/eligrey\/Xccessors\">Xccessors<\/a>.<\/p>\n<p>I have made an implementation of <a href=\"http:\/\/dev.w3.org\/html5\/spec\/Overview.html#dom-dataset\">HTML 5 dataset<\/a> (data-* attributes) support that almost conforms to the HTML 5 spec<span style=\"color: #ff0000;\">*<\/span> and works in Firefox 1.5+, Opera 9.5+, Safari, and Google Chrome. It uses getters and setters to simulate a psuedo-native HTML 5 dataset API. The code is <a href=\"http:\/\/creativecommons.org\/licenses\/LGPL\/2.1\/\">licensed <acronym title=\"Creative Commons GNU Lesser General Public License\">CC GNU LGPL<\/acronym><\/a> and can be <a href=\"http:\/\/code.eligrey.com\/download.php?file=html5%2Fdataset%2Flatest%2Fhtml5-dataset.js\">downloaded here<\/a>. I have uploaded a <a title=\"HTML 5 dataset Demo\" href=\"http:\/\/code.eligrey.com\/html5\/dataset\/dataset-demo.html\">demo<\/a> (also in <a href=\"http:\/\/code.eligrey.com\/html5\/dataset\/dataset-demo.html\">XHTML 5<\/a>) that you can try out. The script includes these extra functions: <code>Element.removeDataAttribute(<em>name<\/em>)<\/code>, <code>Element.setDataAttribute(<em>name<\/em>, <em>value<\/em>)<\/code>, and <code>Element.setDataAttributes()<\/code> (all explained below).<\/p>\n<p><span style=\"color: #ff0000;\">*<\/span>You cannot set <em>new<\/em> items the standard way like <code>Element.dataset.name = value<\/code> (already existing items can though). You either have to add new items by doing <code>Element.setDataAttribute(<em>name<\/em>, <em>value<\/em>)<\/code> for single additions and <code>Element.setDataAttributes(object full of {name, value:String} pairs)<\/code> to add multiple items at once. Instead of <code>delete element.dataset[name]<\/code>, you must use <code>element.dataset[name] = undefined<\/code> or <code>Element.removeDataAttribute(<em>name<\/em>)<\/code> to remove data-<em>name<\/em>. Example of setting values:<\/p>\n<pre lang=\"javascript\">var foo = document.createElement('div');\nfoo.setDataAttributes({'bar':'blah', 'lorem':'Lorem ipsum.'});\nfoo.dataset.bar == 'blah';\nfoo.dataset.bar = 'eligrey.com';\nfoo.dataset.bar == 'eligrey.com';\nfoo.setDataAttribute('foobar', foo.dataset.lorem);\nfoo.dataset.foobar == 'Lorem ipsum.'<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Update: Getting (not setting) data-* attributes through Element.dataset now works in IE8 with the help of Xccessors. I have made an implementation of HTML 5 dataset (data-* attributes) support that almost conforms to the HTML 5 spec* and works in Firefox 1.5+, Opera 9.5+, Safari, and Google Chrome. It uses getters and setters to simulate [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[15,76,77,90,93],"class_list":["post-264","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-browsers","tag-html5","tag-html5-dataset","tag-javascript","tag-javascript-snippets"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pfpUD-4g","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts\/264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/comments?post=264"}],"version-history":[{"count":0,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts\/264\/revisions"}],"wp:attachment":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/media?parent=264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/categories?post=264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/tags?post=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}