Data-* Custom properties for HTML5

HTML5 adds a new feature that is custom data properties, that is, data-* custom properties.

In HTML5 we can use the data-as a prefix to set the custom properties we need to do some data storage.

Of course, the advanced browser can be defined by scripting and data access. Very useful in project practice. For example:

<id= "user"  data-uid= "12345"  data-uname= "Fool's Wharf"  ></div>

Accessing the values of data-* custom properties using the attribute method

It is convenient to use the attributes method to access the values of data-* custom properties:

// get the Data-property using GetAttribute var user = document.getElementById (' user '); var // userName = ' fool's Wharf ' var // userId = ' 12345 ' // use SetAttribute to set data-property user.setattribute (' data-site ', ' http://www.baidu.com ');

This method works well in all modern browsers, but it is not HTML5 custom data-* attribute is used, otherwise it is no different from the custom attributes we used before.

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

DataSet property accesses the value of the data-* custom property

This approach accesses the value of the data-* custom property by accessing the DataSet property of an element. This dataset property is part of the HTML5 JavaScript API and is used to return a Domstringmap object that selects all of the element data-properties.

Compared to the attributes method:

Data-* is mainly a custom attribute is standardized, the value of the loop when the DataSet property is more convenient, there is no problem is that the custom attribute also does not conform to the HTML specification.

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

It is also important to note that if the Data-property name contains a hyphen, for example: Data-date-of-birth, the hyphen will be stripped and converted to a camel-named name, and the preceding property name should be: dateOfBirth.

<id= "user"  data-id= "1234567890"  data-name= " Fool's Wharf "  data-date-of-birth> Marina </div>

varel = Document.queryselector (' #user '); Console.log (el.id); //' user 'Console.log (El.dataset);//a DomstringmapConsole.log (el.dataset.id);//' 1234567890 'Console.log (El.dataset.name);//' fool's Wharf 'Console.log (El.dataset.dateOfBirth);//"'El.dataset.dateOfBirth = ' 1985-01-05 ';//sets the value of the Data-date-of-birth.Console.log (' somedataattr 'inchEl.dataset);//falseel.dataset.someDataAttr = ' MyData '; Console.log (' Somedataattr 'inchEl.dataset);//true

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

It 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+ Browser, so it is best to use the getattribute and setattribute to operate in this period.

About the Data-property selector

You may find it useful when actually developing, and you can select the relevant element based on the custom data-property. For example, use Queryselectorall to select elements:

// 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 the corresponding elements by data-property values, such as the following example:

<styletype= "Text/css">. User{width:256px;Height:200px;}. User[data-name= ' Feiwen ']{Color:Brown}. User[data-name= ' CSS ']{Color:Red}</style><Divclass= "User"Data-id= "123"Data-name= "Feiwen">1</Div><Divclass= "User"Data-id= "124"Data-name= "CSS">Terminal</Div>

Data-* Custom properties for HTML5