What are the uses of html5 custom attributes?

html5 custom attribute "data-*" is used to store custom data applied behind a private page, and custom data can give the page a better interactive experience (no need to use Ajax or go to the server) Query data), the syntax is "47287902e26d2ffdfab322f151f2f7cd"; the "data-*" attribute consists of two parts: 1. Do not include uppercase letters in the attribute name. -" must be followed by at least one character; 2. Attribute value, which can be any string.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

html5 Custom Attributesdata-*

data-*The attribute is used to store custom data applied behind a private page. It is a new attribute in HTML5.

• somevalue: Specify attribute value (a string)

data-*Attributes can be used in all HTML Embed data in the element.

Customized data can give the page a better interactive experience (no need to use Ajax or query data on the server).

data-*The attribute consists of the following two parts:

• The attribute name should not contain uppercase letters, and there must be at least one character after data- .

• Attribute value, the attribute value can be any string

Note: Custom attribute prefix "data-" will be ignored by the client .

You can use dataset to obtain the object constructed by data-attribute. This method is currently only implemented in some browsers such as Chrome and Opera. If other browsers need to obtain their attribute values, they need to use getAttribute and setAttribute to operate.

As long as we define our custom attributes with "data-" as the prefix in the tag, it can be used to store some data.

43d5f872dac78da2f00d1b2554e67c92在标签里设置H5新增的自定义属性16b28748ea4df4d9c2150843fecfba68

This data attribute can also be applied in CSS, provided that your browser supports the after pseudo-class and the attr attribute of content (lower versions of IE do not support it):

737b187744250f324eeb34e9a767a074data属性应用于CSS中16b28748ea4df4d9c2150843fecfba68

#myDiv{ position: ralative; } #myDiv:hover:after{ position: absolute; top: 0px; left: 0px; content: attr(data-attribute); color: red; }

How to get the value of the data attribute?

43d5f872dac78da2f00d1b2554e67c92在标签里设置H5新增的自定义属性16b28748ea4df4d9c2150843fecfba68

1. Use getAttribute to get

var myDiv = document.getElementById("myDiv"); var theValue = myDiv.getAttribute("user-defined-attribute");

2. Use Html5 custom attribute object Dataset to get

var myDiv = document.getElementById("myDiv"); var theValue = myDiv.dataset.attribute;

Note: Names with hyphens are in When using it, you need to name it in camel case, that is, write it in a combination of upper and lower case, which is similar to the style object of the application element,dom.style.borderColor. For example, the data attribute isdata-other-attribute, then if we want to get the corresponding value, we can use: myp.dataset.otherAttribute

If the Html element defines multiple custom attributes , how to obtain?

89d9a64ee0d1f224431c05a17eee736b在标签里设置多个自定义属性16b28748ea4df4d9c2150843fecfba68

1. Use loop traversal

var myDiv = document.getElementById("myDiv"); var attrs = myDiv.attributes, var expense = {}, i, j; for (i = 0, j = attrs.length; i < j; i++) { if(attrs[i].name.substring(0, 5) == 'data-') { expense[attrs[i].name.substring(5)] = attrs[i].value; } }

2. Usedatasetattribute

var expense = document.getElementById('myDiv').dataset;

Note:datasetand It is not a JavaScript object in the typical sense, but aDOMStringMap object,DOMStringMapis a new interactive variable in HTML5 that contains multiple name-value pairs

1) , let all the custom attribute values be stuffed into an array

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

2), delete adata attribute

delete myDiv.dataset.attribute;

3, add a data attribute

myDiv.dataset.attribute4 = 'value4';

Dataset compatibility processing

If the browser does not support dataset, it is necessary to do some compatibility processing:

if(myDiv.dataset) { myDiv.dataset.attribute = "valueXX"; // 设置自定义属性 var theValue = myDiv.dataset.attribute; // 获取自定义属性 } else { myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性 var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性 }

Conclusion:

Usingdatasetto operatedatais slightly slower than usinggetAttribute, although usingdatasetcannot improve the code performance, but for concise code, it is very helpful to improve the readability and maintainability of the code.

[Recommended courses:HTML5 video tutorial,web front-end]

The above is the detailed content of What are the uses of html5 custom attributes?. For more information, please follow other related articles on the PHP Chinese website!