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 ""; 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 Attributes<span style="font-size: 18px;">data-*</span>

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

<element data-*="somevalue">

• 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.

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

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):

<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>

#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?

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

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 is data-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?

<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>

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) == &#39;data-&#39;) {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}

2. Use dataset attribute

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

Note: dataset and It is not a JavaScript object in the typical sense, but a DOMStringMap object, DOMStringMap is 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 a data 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:

Using dataset to operate data is slightly slower than using getAttribute, although using dataset cannot 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!