Data Attributes in HTML

Data attributes:

"data" attributes are normal HTML element attributes and and are defined using the "data-" prefix.
To return the list of all the data attributes in jQuery use
$("<selector>").data();

Let us take an example:
If we want to store different user-defined properties of an HTML element,
we can write:-
<span id="span1" data-color-blind-style="true" data-should-be-repeated="true" data-repetition-count="3" >Test</span>

The following is the jQuery snippet:

  
  $(document).ready(function(){
  	let data_properties = $("#span1").data();
  	if(data_properties.length != 0) {
  	    if(data_properties["color-blind-style"] == "true") {
    		$("#span1").css({color:"red"});
  		}
  	if(data_properties['should-be-repeated'] == "true") {
  		if(data_properties["repetition-count"]!= "0") {
    		let j = data_properties["repetition-count"];
        	for(let i=0;i<j;i++) {
        		document.getElementById("res").innerHTML += $("#span1").html()
    		}
  		 }
  	}
  }