JS for interlaced color

<!        DOCTYPE html>Body,ul{margin:0;padding:0;}                ul{width:500px;                margin:100px Auto;                padding:10px;                Border:solid 1px #E3E3E3; List-Style:none; Line-height:2;                } li{padding:8px 10px; Border-radius:8px; }                    /*Li:nth-child (odd) {background: #E7E7E7;            } li:nth-child (even) {background: #EEE8AA;                } li:hover{background:red;            Color:white; }*/. bg1{background: #E3E3E3;            }. bg2{background: #EEE8AA;                }. bg3{Color:white;            background:red; }        </style> //by the class name is an array of classes, the data type is object, it also has its own corresponding index value, index starting from 0        varNews = Document.getelementsbyclassname (' news ') [0]; //created a property for the news element, Matt, and assigned a value Mvalue        //1.setAttribute (property name, property value) Set Property GetAttribute ("property name")//News.setattribute ("MAtt", "Mvalue");//Console.log (News.getattribute ("MAtt"));        //2. HTML custom attribute Tag element. property = "attribute value";//News.att = "value";//Console.log (News.att)        //Get the tag element by tag name, get the class array        varLis = news.getelementsbytagname (' li '); Console.log (typeoflis); //traversing Lis         for(vari = 0; i < lis.length; i++) {            if(i% 2 = = 1) {Lis[i].classname= "BG1"; //Customizing a property to temporarily store the value of the current classname//lis[i].oldclassname = "BG1";}Else{lis[i].classname= "Bg2";//lis[i].oldclassname = "Bg2";            }                        //Mouse Events            //onmouseoverLis[i].onmouseover =function(){                //when the mouse is over, change the classname, the original classname temporarily stored up                 This. Oldclassname = This. ClassName; //lis[i].classname = "Bg3";//Loop internal Set event function, event function after the loop execution is completed;                 This. ClassName = "Bg3"; }                        //Mouse Leave event onmouseoutLis[i].onmouseout =function(){                //How do you get back to the original style?                //How do I add a custom attribute to HTML?                 This. ClassName = This. Oldclassname; }        }                        </script>
JS for interlaced color