Adding variables to DOM elements

Question

I would like to ask, if is 'legal' to add custom variables to document body elements. For example:

document.getElementById('elem1').customVariable = 'xxx';

This code just work, but i don't know if it is 'allowed'

It doesn't appear in list of tag's arguments, but variable is usable in further code..

possible duplicate of [Can I add arbitrary properties to DOM objects?](http://stackoverflow.com/questions/4258466/can-i-add-arbitrary-properties-to-dom-objects) — Lightness Races in Orbit, Dec 21 '11 at 18:28
http://stackoverflow.com/questions/7895560/javascript-dom-setting-custom-dom-element-properties is a better Q&A — Lightness Races in Orbit, Dec 21 '11 at 18:29

score 11 · Accepted Answer · edited Dec 21 '11 at 18:59

11

I think that will work, but the more common way to add custom attribute is like this:

<div id="elem1" data-customVariable="foo"

And then

document.getElementById('elem1').setAttribute("data-customVariable", "bar");

Or if older browser choke on setAttribute

document.getElementById('elem1')["data-customVariable"] ="bar";

EDIT

Thanks to pimvdb for pointing out that you can also do

document.getElementById('elem1').dataset.customVariable ="bar";

Just note that you'll have to watch how you name this -- the camel casing can throw it off. You'll want

<div id="elem1" data-custom-variable="xxx"></div>

edited Dec 21 '11 at 18:59

pimvdb

answered Dec 21 '11 at 18:26

Adam Rackis

2

`elem.dataset.customVariable` is also possible with `data-` attributes - might be a bit cleaner. – pimvdb Dec 21 '11 at 18:34

1 Answers1