Custom data- * attributes

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"

Guess you like

Origin www.cnblogs.com/shemingxin/p/12655501.html