HTML5 custom attribute data-* detailed introduction and JS operation examples

HTML5 custom attribute data-* detailed introduction and JS operation examples_html5 tutorial skills

WBOY

Release： 2016-05-16 15:48:12

Original

2004 people have browsed it

Of course, definition and data access can be done through scripts in advanced browsers. Very useful in project practice.

For example:

Copy code

The code is as follows:

Use attribute method to access the value of data-* custom attribute

It is very convenient to use the attributes method to access the value of data-* custom attributes:

Copy the code

The code is as follows:

// Use getAttribute to get the data- attribute
var user = document . getElementById ( 'user' ) ;
var userName = plant . getAttribute ( 'data-uname' ) ; // userName = 'Script Home'
var userId = plant . getAttribute ( 'data-uid' ) ; // userId = '12345'

// Use setAttribute to set the data- attribute
user . setAttribute ( 'data-site' , 'http://www.jb51.net' ) ;

This method can work normally in all modern browsers, but it is not the purpose of HTML 5's custom data-* attributes, otherwise it will be no different from the custom attributes we used before, for example:

Copy the code

The code is as follows:

This "original" custom attribute is no different from the data-* custom attribute above, but the knowledge attribute name is different.

dataset attribute access data-*custom attribute value

This method accesses the value of data-* custom attributes by accessing the dataset attribute of an element. The dataset attribute is part of the HTML5 JavaScript API and is used to return a DOMStringMap object with the data- attributes of all selected elements.

When using this method, instead of using the complete attribute name, such as data-uid, to access data, the data- prefix should be removed.

Another thing to note is that if the data- attribute name contains a hyphen, for example: data-date-of-birth, the hyphen will be removed and converted to camel case naming. The previous attribute name will be converted After that it should be: dateOfBirth.

Copy code

The code is as follows:

Dock

If you want to delete a data-attribute, you can do this: delete el . dataset . id ; or el .dataset . id = null ; .

Looks beautiful, haha, but unfortunately, the new dataset attribute is only implemented in Chrome 8 Firefox (Gecko) 6.0 Internet Explorer 11 Opera 11.10 Safari 6 browsers, so in the meantime it is best to use getAttribute and setAttribute to operate.

About data-attribute selector

In actual development, you may find it useful to select relevant elements based on custom data- attributes. For example, use querySelectorAll to select elements:

Copy the code

The code is as follows:

// Select all elements containing the 'data-flowering' attribute
document . querySelectorAll ( '[data-flowering]' ) ;

// Select all elements containing the 'data-text-colour' attribute value of red
document . querySelectorAll ( '[data-text-colour="red"]' ) ;

Similarly, we can also set CSS styles for corresponding elements through the data- attribute value, such as the following example:

Copy code

The code is as follows:

dock