(window.webpackJsonp=window.webpackJsonp||[]).push([[1257],{1665:function(t,a,e){"use strict";e.r(a);var s=e(31),r=Object(s.a)({},(function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"data-attributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#data-attributes"}},[t._v("#")]),t._v(" Data Attributes")]),t._v(" "),e("h2",{attrs:{id:"data-attribute-use"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#data-attribute-use"}},[t._v("#")]),t._v(" Data Attribute Use")]),t._v(" "),e("p",[t._v("HTML5 "),e("code",[t._v("data-*")]),t._v(" attributes provide a convenient way to store data in HTML elements. The stored data can be read or modified using JavaScript")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("data-submitted")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("yes"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("user_profile"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  … some content …\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n\n")])])]),e("li",[t._v("\nData attribute structure is `data-*`, i.e. the name of the data attribute comes after the `data-` part. Using this name, the attribute can be accessed.\n")]),t._v(" "),e("li",[t._v("\nData in string format (including `json`) can be stored using `data-*` attribute.\n")]),t._v(" "),e("h2",{attrs:{id:"older-browsers-support"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#older-browsers-support"}},[t._v("#")]),t._v(" Older browsers support")]),t._v(" "),e("p",[t._v("Data attributes were introduced in HTML5 which is supported by all modern browsers, but older browsers before HTML5 don't recognize the data attributes.")]),t._v(" "),e("p",[t._v("However, in HTML specifications, attributes that are not recognized by the browser must be left alone and the browser will simply ignore them when rendering the page.")]),t._v(" "),e("p",[t._v("Web developers have utilized this fact to create non-standard attributes which are any attributes not part of the HTML specifications. For example, the "),e("code",[t._v("value")]),t._v(" attribute in the line bellow is considered a non-standard attribute because the specifications for the "),e("code",[t._v("<img>")]),t._v(" tag don't have a "),e("code",[t._v("value")]),t._v(" attribute and it is not a global attribute:")]),t._v(" "),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("sample.jpg"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("test"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n\n")])])]),e("p",[t._v("This means that although data attributes are not supported in older browsers, they still work and you can set and retrieve them using the same generic JavaScript "),e("code",[t._v("setAttribute")]),t._v(" and "),e("code",[t._v("getAttribute")]),t._v(" methods, but you cannot use the new "),e("code",[t._v("dataset")]),t._v(" property which is only supported in modern browsers.")]),t._v(" "),e("h4",{attrs:{id:"syntax"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#syntax"}},[t._v("#")]),t._v(" Syntax")]),t._v(" "),e("ul",[e("li",[e("code",[t._v('<element data-custom-name="somevalue">')])])]),t._v(" "),e("h4",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("table",[e("thead",[e("tr",[e("th",[t._v("Value")]),t._v(" "),e("th",[t._v("Description")])])]),t._v(" "),e("tbody",[e("tr",[e("td",[t._v("somevalue")]),t._v(" "),e("td",[t._v("Specifies the value of the attribute (as a string)")])])])])])}),[],!1,null,null,null);a.default=r.exports}}]);