All such custom data are available via the
HTMLElement interface of the element the attribute is set on. The
HTMLElement.dataset property gives access to them.
* may be replaced by any name following the production rule of XML names which includes the following recommendations:
- The name should not start with
xml(case-insensitive), as it's reserved for future XML specifications.
- The name should not contain any colon characters (
:), as XML assigns meaning to such names.
- The name should not contain any capital letters, as XML is all lowercase.
HTMLElement.dataset property and user-agents will include the attribute in the
DOMStringMap containing all the custom data attributes for an
If you plan to use
HTMLElement.dataset, the portion of the attribute name following the
dataset version of the attribute name removes the "data-" prefix and converts the rest of the name from kebab-case to camelCase. For example,
element.getAttribute("data-test") is equivalent to
data-test-abc will be accessible as
HTMLElement.dataset.testAbc (or by
HTMLElement.dataset["testAbc"]). Avoid non-alphabetic characters following a hyphen, such as
data--test, as they will not be recognized by
data-* attributes, even ordinary HTML elements can become rather complex and powerful program-objects. For example, a space-ship "sprite" in a game could be a simple
<img> element with a
class attribute and several
<img class="spaceship cruiserX3" src="shipX3.png" data-ship-id="324" data-weapons="laserI laserII" data-shields="72%" data-x="414354" data-y="85160" data-z="31940" onclick="spaceships[this.dataset.shipId].blasted()" />
For a more in-depth tutorial about using HTML data attributes, see Using data attributes.
|HTML Standard |
BCD tables only load in the browser