In actual development, sometimes the transferred data needs to be stored when rendering at the front end, then at this time you can use the new data-custom attribute in HTML5 to store the required data
For example, this tag uses a custom tag to store the required information
<span class="float_left main_ul_span blue_hover" id="test" data-exam-id="AAA" onclick="check_exam(this.dataset.examId)">{
{
exam.name}}</span>
The content of this custom attribute cannot be obtained directly through the attribute name. The following two commonly used methods are given:
1. Get through the dataset provided by HTML5
For example, the above paragraph can be like this:
var span=document.getElementById('test');
var value=span.dataset.examId;
When you see this, you may have questions: I am storing data-exam-id. It doesn’t
matter whether the name is correct or the case is not correct. In fact, it is not. Whether it is setting or reading, it will always Take the following measures:
When setting custom attributes, uppercase letters are automatically separated by'-', and uppercase is converted to lowercase. What
you get using dataset is the content after data-, and when you encounter'-', the corresponding letters will be automatically removed and converted to uppercase
2. Get through js
Obtaining and setting through Attribute in js is different from the above conversion rules:
Set by DOM.setAttrobute('data-name','value'). During the setting process, all uppercase letters encountered are converted to lowercase, and no'-' split will be added in between
Read the corresponding data through getAttribute('data-name'), if you encounter uppercase at this time, all are converted to lowercase