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

Home

Web Front-end

H5 Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:48 PM

data html5 Custom properties

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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn