置class的方法：

 // 修改类名 可以同时修改多个
 element.className = "name1 name2 ..."
 
 // 在类名列表里添加类名
 element.classList.add("active");
 // 在类名列表里删除类名
 element.classList.remove("active");

1、开关思想

开关思想：定义一个变量, 这个变量决定了一个状态，事件触发的时候，根据这个变量的值，执行对应的操作，操作完还需要修改这个变量的值。

比如：点击按钮，显示或隐藏div

 // 需要一个变量存储状态
 var flag = true;
 get_id("btn").onclick = function () {
     // console.log("点击事件触发了");
     // if(flag==true){
     if (flag) {
         // 把div的left值改成-200px
         my$("box").style.left = "-200px";
         // 需要把flag改成false,防止下一次点击这个flag还是true,如果flag还是true,就会一直走这里的代码
         flag = false
    } else {
         my$("box").style.left = "0px";
         // 防止下一次点击flag还是false,就还是会走这里的代码
         flag = true
    }
 }
 

开关灯案例：

0. 当点击"关 灯"按钮时，将body背景颜色设置成黑色，同时将 "关 灯" 设置成 "开 灯"；
1. 当点击"开 灯"按钮时，将body背景颜色设置成白色，同时将 "开 灯" 设置成 "关 灯".

html和css代码

 <style>
 .cls{
      background-color: black;
 }
 </style>
 <input type="button" value="开/关灯"  id="btn">

JavaScript代码

/**

 * @author zswxjjh

 * @date  2021/3/29

 */
'use  strict';

/*
* 模仿DOMTokenList对象，提供contains（）
* add（），remove（）。toggle（）方法
* 重写toString方法，为了模拟类数组特性
* 提供toArray方法
*
* */
var  classList=(function () {
  /*
  * e是一个元素，定义一个CSSClassList类模拟
  * DOMTokenList类
  * */
  function classList(e) {
   /* if(e.classList)
      return e.classList;
    else*/
      return new CSSClassList(e);
  }

  /*
  * 定义CSSClassList类
  * */
  function CSSClassList(e) {
     this.e=e;
  }

  /*
  * c是一个合法的类名，判断是否包含给定的类名
  * 返回boolean
  * */
  CSSClassList.prototype.contains=function (c) {
      //是否合法
    if(!c)
    {
      throw new TypeError('参数不存在!');
    }
    else  if(c.length===0 || c.lastIndexOf(' ')!==-1/*c包含空格*/)
    {
      throw new TypeError('不合法的类名:"'+c+'"!');
    }
    if(!this.e.className)
      return false;
   if(this.e.className===c)
     return true;
   return this.e.className.search('\\b'+c+'\\b')!==-1;
  };

  /*
  * 追加一个类名在尾部
  *
  * */
  CSSClassList.prototype.add=function (c) {
      if(this.contains(c))
        return;
      //判断值里面是否以空格结尾
      var classes=this.e.className;
       if(!classes)
         this.e.className='';
       if(classes.length!==0 && classes[classes.length-1]!==' ')/*不是以空格结尾*/
       {
          c=' '+c;
       }
       this.e.className+=c;
  };
  /*
  * 移除类名字c
  * */
  CSSClassList.prototype.remove=function (c) {
     if(this.contains(c))
     {
       var pattern=new RegExp('\\b'+c+'\\b\\s*','g');
       this.e.className=this.e.className.replace(pattern,'');
       if(!this.e.className)
       {
         this.e.removeAttribute('class');
       }
     }
  };

  /*
  * 如果c存在，删除c，返回false
  * 否则，追加c，返回true
  * */
  CSSClassList.prototype.toggle=function (c) {
     if(this.contains(c))
     {
       this.remove(c);
       return false;
     }
     else
     {
       this.add(c);
       return true;
     }
  };

  /*
  * 覆盖toString方法
  * */
  CSSClassList.prototype.toString=function () {
      return this.e.className;
  };

  /*
  * 提供类数组的功能，转换成数组
  * */
  CSSClassList.prototype.toArray=function () {
      return this.e.className.match(/\b\w+\b/g) ||[];
  };

  return classList;
})();
/*以上代码提供对HTML5标签属性class的跨浏览器操作*/