Data attributes - To: Information and samples for HTML5 and related APIs

Using custom attributes

A text with an element with custom data attributes.

Data attribute values:

(not checked yet)

Using custom attributes with the dataset property

Data attribute values via dataset:

(not checked yet)

Code used in this page

	(function () {
		document.getElementById("read-data-attributes").onclick = function () {
			var customValuesElm = document.getElementById("custom-values-elm");
			
			var value = customValuesElm.dataset.type;
			document.getElementById("data-attribute-value-dataset").innerHTML = "Type: " +  + ", value: " + customValuesElm.getAttribute("data-value");
		};
		
		document.getElementById("read-data-attributes-dataset").onclick = function () {
			var customValuesElm = document.getElementById("custom-values-elm"),
				value;
			try {
				value = customValuesElm.dataset.type;
			}
			catch (e) {
				value = 'Error - access didn\'t work';
			}
			document.getElementById("data-attribute-value-dataset").innerHTML = "Type: " + value;
		};
	})();