Introduction to HTML data attributes and earlier browser compatibility Algorithms

Introduction to HTML data attributes and earlier browser compatibility Algorithms

 

Instance

Use the data-* attribute to embed custom data:

• Owl
• Salmon
• Tarantula

Browser support

IE	Firefox	Chrome	Safari	Opera
Supported	Supported	Supported	Supported	Supported

All mainstream browsers support the data-* attribute.

Definition and usage

The data-* attribute is used to store private custom data of pages or applications.

Data-* attributes allow us to embed custom data attributes on all HTML elements.

The stored (custom) data can be used in JavaScript on the page to create a better user experience (without Ajax calls or server-side database queries ).

The data-* attribute consists of two parts:

• Zhang Wei
• JokerWill

Name:
Email:
Mobile phone:

<Script> function $ (id) {return document. getElementById (id);} var lis = document. getElementsByTagName ('lil'); for (var I = 0, li; li = lis [I]; I ++) {li. onmouseenter = function (event) {event = event | window. event; var user = event.tar get | event. srcElement; // var data = user. dataset; var data = get_dataset (user); $ ('accountname '). innerText = data. accountName; $ ('name '). innerText = data. name; $ ('email '). innerText = Data. email; $ ('mobile '). innerText = data. mobile; $ ('Card '). style. display = 'block';}; li. onmouseleave = function (event) {$ ('card '). style. display = 'none' ;};}// function with compatibility get_dataset (ele) {if (ele. dataset) return ele. dataset; else {// the following code is compatible: 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

The attribute name should not contain any uppercase letters and must contain at least one character after the prefix "data -".

The property value can be any string.

Note: The user agent ignores the Custom Attributes prefixed with "data.

 

Syntax

Attribute Value

Value	Description
Somevalue	Specifies the attribute value (in a string ).

 

HTML adta-* attributes

=============== [From W3School] ================================

[Additional Information]

 

HTML tags can be added with custom attributes to store and operate on data. However, this will cause html syntax not to comply with the Html specification. A custom data attribute is added to the HTML5 specification. The usage of the custom data attribute is very simple. You can add any attribute starting with data-to the HTML Tag, these attribute pages are not displayed. They do not affect the layout and style of your pages, but are readable and writable. The following code snippet is a valid HTML5 Tag:

11111

But how can we read this data? Of course you can traverse the page elements to read the desired attributes, but jquery has built-in methods to operate these attributes. Use jQuery's. data () method to access these data-* attributes. One of the methods is. data (obj), which appears after jQuery1.4.3 and can return corresponding data attributes. For example, you can use the following code to read the data-id attribute value -- 123:

var myid= jQuery(#item).data('id');

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

 

You can directly access this data through js, and get the corresponding value through the json key value:

var gameStatus= jQuery(#item).data('id').game;

You can also use the. data (key, value) method to directly assign values to the data-* attribute. One important thing to note is that these data-* attributes should be related to the elements in which they are stored. do not regard them as storage tools for storing anything. Although data-* is a property that appears in HTML5, jquery is generic. Therefore, you can still use it on non-HTML5 pages or browsers. data (obj) method to operate data-* data.

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

=============== [Data attribute low version compatibility] ============================

[DEMO]

[Effect]

 

Key code]

 

 

// Function get_dataset (ele) {if (ele. dataset) return ele. dataset; else {// the following code is compatible: 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