Add a data- HTML5 in a way to customize the properties, the so-called data- fact that data- prefix plus the name of a custom property, use this structure for data storage. Data- * Use current situation can be resolved without a custom property management chaos.
Custom properties provided the following two ways:
(1) The first way is to write directly above HTML tags:
<ul id="sidebar-menu" class="bm-menu">
<li class="bm-menu-item" data-id="1" data-url="./table.html">
表单
</li>
<li class="bm-menu-item" data-id="2" data-url="./404.html">
404
</li>
</ul>
In this way by the time set to be noted that, if a custom property set is a combination of multiple words, then, need to use the dash (-) links, such as:
<h2 data-birth-date="20200407">hello</h2>
(2) The second mode is set by the dataset attributes js:
var test = document.getElementsByTagName('li');
test.dataset.url="./404.html"
HTML5 elements will have attributes of a dataset, which is a type of key-value pairs DOMStringMap set.
In this manner also be noted that, if the set is a combination of a plurality of words, then, need to be written using the camel nomenclature:
var test = document.getElementsByTagName('li');
test.dataset.birthDate="20200407"