js设置样式的三种 常用方式及其点击实现样式切换

css文件
需要什么就写什么
例如：

div{width: 200px;height: 200px;border: 1px solid ;}.active{border: 10px solid mediumorchid;}.test{background:linear-gradient(to bottom right,red,orangered,lawngreen,yellow,green);}

HTML

<div>你很棒加油</div>

获取div

var _div=document.querySelector("div");

js设置样式的第一种方式
直接引用

// 第一种直接设置样式_div.style.fontSize='50px';

js设置样式的第二种方式
通过添加移除class属性
实现点击给div加边框第二次

 //第二种,通过添加移除class属性  _div.onclick=function(){  if(_div.className==""){  _div.className="active";  }else{  _div.className="";  }  }

第三种，通过更新class列表

 //第三种，通过更新class列表  _div.onclick=function(){  if(!_div.classList.contains("test")){  _div.classList.add("test");  _div.classList.add("active");  }else{  _div.classList.remove("test");  _div.classList.remove("active");  }    }