HTML5 Custom Property Object DataSet

Text to HTML5 custom Attribute object DataSet Introduction

HTML5 Description of custom attributes

The "28 HTML5 features, tricks and techniques you must know" article in the previous translation of the custom legal attributes in HTML5 data- has been introduced, that is, in HTML5 we can use data- the prefix to set the custom properties we need to do some data storage, For example, we want to store the corresponding ID on a text button:

 <  a  href  = "javascript:"   Data-id  = "2312"  >  test </ a  >  

The data- prefix is called data属性 , which can be defined by a script, or the CSS property selector can be applied to style settings. The number is unrestricted, providing very powerful control over the control and rendering of the data.

Ii. DataSet Foundation

The following is an example of an element applying the Data property:

<id= "Day2-meal-expense"  data-drink= "Coffee"   Data-food= "Sushi"  data-meal= "Lunch">¥20.12</  div>

To get the value of a property, you can use the DataSet object as follows:

var expenseday2 = document.getElementById (' day2-meal-expense '); var typeofdrink = Expenseday2.dataset.drink;

For this basic use, I made a demo, you can click here: DataSet Basic Use instance Demo

Click on the Demo page button to do the test, if the browser does not support dataset , such as Firefox 4, the results will be similar to the following:

If supported, such as the Chrome 11 browser, the result of the popup is:

It is important to note that the name with the hyphen connection needs to be named Camel when used, that is, the combination of uppercase and lowercase writing, which is similar to the style object of the application element dom.style.borderColor . For example, suppose that the example above now has the following data property, data-meal-time then we want to get the corresponding value to use:

Expenseday2.dataset.mealTime

dataProperty basically all browsers are supported, butdatasetThe object belongs to the upstart, now only in opera 11.1+, Chrome + + can be used by JavaScript, usingdatasetAccess to your customizeddataProperty. For other browsers, FireFox 6+ (not out) and Safari 6+ (not out) will supportdatasetobject, as for IE browser, it seems to be a distant trend at present. For specific compatibility data, you can click here to access.

Iii. Why we need a dataset

If you use the traditional method to get the property value it should look similar to the following:

var typeofdrink = document.getElementById (' Day2-meal-expense '). getattribute (' Data-drink ');

Now, assuming that we want to get multiple custom attribute values, the thing that's going to happen is, we're probably going to do it with n lines like this:

< J ; i++) {  ' data-') {    = attrs[i].value;   }}

Instead of using dataset attributes, we don't need any loops to get the value you want, direct seconds to kill:

Expense = document.getElementById (' Day2-meal-expense '). DataSet;

datasetIs not a typical JavaScript object, but rather a DOMStringMap对象 DOMStringMap new interactive variable that contains multiple name-value pairs. HTML5

Iv. operation of the dataset

You can manipulate name-value pairs like this:

Chartinput = [];for (var item in expense) {  Chartinput.push (Expense[item]);}

The line of code above is to have all the custom property values plugged into an array.

If you want to remove one data属性 , you can do this:

Delete expenseday2.dataset.meal;

If you want to add an attribute to an element, you can do this:

Expenseday2.dataset.dessert = ' icecream ';

V. Speed compared to GetAttribute

Using the dataset operation data  getAttribute is slightly slower than the use, here is a page specifically for the two methods to test the speed, dataset vs attributes loop, please use the Chrome browser and opera 11.1+ browser, click "Run Test button, you will get some data as follows:

However, if we only deal with a small amount of data, the effect of this difference in speed is basically not. Instead, we should see that using dataset an action-adaptive property is getAttribute a lot less cumbersome and more readable than other similar forms. Therefore, the tradeoff is that manipulating custom attributes, the dataset operation is an election.

Vi. where to use the dataset

Each time you use the custom Data property, it's dataset a good idea to use the go to get a name-value pair. Considering that many browsers are still dataset regarded as non-recognized extraterrestrial organisms, it is necessary to carry out feature detection to see if support dataset , similar to the following, is used in actual use:

if (expenseday2.dataset) {  Expenseday2.dataset.dessert = ' icecream ';} else {  expenseday2.setattribute (' Data-dessert ', ' icecream ');}

Note: If your application updates data属性 values frequently, it is recommended that you use JavaScript objects for data management instead of updating them every time data属性 .

Vii. Data Properties in CSS

We can set the CSS style for the corresponding element based on the data property value, for example:

The HTML code is as follows:

<class= "mm"  data-name= "Zhang Yun"></Div > <  class= "mm"  data-name= "undefined"></ Div >

The CSS code is as follows:

. mm{width:256px; height:200px;}. Mm[data-name= ' Zhang Yun ']{background:url (http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat;}. Mm[data-name= ' undefined ']{background:url (http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg) no-repeat;}

As a result, there will be a picture of a little girl and a big beauty, such as the following in IE7 document mode:

You can click here: HTML5 custom properties and CSS3 style demo

Viii. a simple and comprehensive example

To demonstrate the application of the dataset, here is a demo page, and if you use a dataset to create a data graph effect, you can click here: Data graph under HTML5 dataset demo

Sliding the HTML5 range control, you can see the following data and the size of the graphic changed, as follows (from Opera 11.1):

Ix. Conclusion

It's dataset a good idea to use custom attributes that get the elements, and with more browser support later on, such as the Firefox browser, it's possible that this object property will be used formally in the actual project. While it dataset is not possible to improve the performance of your code, it is helpful to improve the readability and maintainability of your code for clean code.

If you dataset are interested, do some demos or something, you can go here to Opera Github repository to play your little results.

Reference article: an Introduction to Datasets
Demo support: Cost of electricity€/kwh over the decade

Transferred from: http://www.zhangxinxu.com/wordpress/?p=1693

HTML5 Custom Property Object DataSet