data-attribute.js

/* data attribute  */
//create navigation class="navbar" data-number="0" data-name="navbarlight" in html

   //example
     
      /*
      let nav=document.querySelector(".navbar");
      
     //getattribute() method
     console.log(nav[0].getAttribute("data-number"));
     console.log(nav[1].getAttribute("data-number")); 

     //using dataset property
     console.log(nav[0].dataset.number);
     console.log(nav[1].dataset.number);
     console.log(nav[0].dataset.name);
     console.log(nav[1].dataset.name);
     */

/*    classname property    */
//get()  or set() value of the class attribute of specified element.

  //example(toggle class function)
    //create class toggle in data-attribute.HTML
    //create to CSS classes in head of HTML to change color.

    /*
    let toggle=document.querySelector(".toggle"); //class name

    //creating an annonymous function
    let color=function(flag){
       if(flag){
          toggle.classname="toggle_in";
       } else{
          toggle.classname="toggle_out";
       }
    };

    color(true);
    color(false);
    */