Introduction to HTML data properties and low-version browser compatibility algorithms

Instance

Use the Data-* property to embed custom data:

<ul><li data-animal-type= "Bird" >owl</li><li data-animal-type= "Fish" >Salmon</li> <li data-animal-type= "Spider" >Tarantula</li> </ul>

Browser support

IE	Firefox	Chrome	Safari	Opera
Support	Support	Support	Support	Support

All major browsers support the Data-* property.

Definition and usage

The Data-* property is used to store private custom data for a page or application.

The Data-* property gives us the ability to embed custom data properties on all HTML elements.

Stored (custom) data can be leveraged by JavaScript in the page to create a better user experience (no Ajax calls or server-side database queries).

The Data-* property consists of two parts:

• The property name should not contain any uppercase letters, and must have at least one character after the prefix "data-"
• The property value can be any string

Note: The user agent completely ignores custom attributes prefixed with "data-".

Grammar

<element data-*= "somevalue" >

Property value

value	Description
Somevalue	The value of the specified property (in string).

HTML adta-* Properties

============== "above from W3school" ===================

"Plus information"

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.

================

============== "Data Property Low version compatible" ==================

"DEMO"

Effect

<! DOCTYPE html>
"Critical Code"
With compatible functions function Get_dataset (ele) {if (Ele.dataset) return ele.dataset;else{//is a compatible code var DataSet = {};var Ele_split = Ele.outerHTML.split (""); for (var i = 0,element; i < ele_split.length;  i++)    {element = Ele_split[i];if (element.substring (0,4) = = "Data") {if (Element.indexof (">")  ! =-1) {element = Element.split (">") [0];}; Ele_key=element.split ("=") [0].slice (5); Ele_value=element.split ("=") [1].slice (1,-1); if (Ele_key.indexof ("-") = =  -1) {Dataset[ele_key] = Ele_value;} Else{ele_keys=ele_key.split ("-"); Ele_key=ele_keys[0];for (i=1;i<ele_keys.length;i++) {Ele_key+=replaceReg (ele _keys[i]);}}}          ;} return dataset;}}


 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
Introduction to HTML data properties and low-version browser compatibility algorithms