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='50犀利士
px';

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");
			  	}