HTML Data Property

HTML tags can add custom properties to store and manipulate data. However, doing so will result in HTML syntax that does not conform to the HTML specification. A custom Data property is added to the HTML5 specification, and the use of the custom data property is simple enough to add any attribute that begins with "data-" to the HTML tag, which is not displayed on the page, and it does not affect the layout and style of your page, but it is readable and writable. The following code fragment is a valid HTML5 tag:

<div id= "item" data-id= ' 123 ' >11111</div>

But how do you read this data? You can certainly traverse the page elements to read the properties you want, but jquery has built-in methods to manipulate these properties. Use the jquery. Data () method to access these "data-*" properties. One way to do this is. Data (obj), which appears after the jQuery1.4.3 version, which returns the corresponding data property. For example, you can read the Data-id property value--123 in the following notation:

var myid= jQuery ("#item"). Data (' ID ');

You can also use the JSON syntax in the "data-*" attribute,

<div id= "Item" data-id= ' {"Game": "On"} ' ></div>

You can access this data through JS directly, through the JSON key value, you can get the corresponding value:

var gamestatus= jQuery ("#item"). Data (' ID '). game;

You can also assign a value directly to the "data-*" property by using the. Data (Key,value) method. One important thing you should be aware of is that these "data-*" attributes should be associated with the element in which it resides, not as a storage tool for storing anything. Although data-* is a HTML5 attribute, jquery is generic, so you can use the. Data (obj) method to manipulate "data-*" data in non-HTML5 pages or browsers.

HTML Data Property