前言
在此之前，我们对一个元素的样式进行修改，需要对其所有样式逐一更改，如下所示：
//获取按钮和div let btn = document.getElementById('bt1'); let box = document.getElementById('box'); //给按钮绑定单击响应函数 btn.addEventListener('click',()=>{ // 一项一项修改 box.style.height = 300+'px'; box.style.backgroundColor = "yellow"; box.style.marginTop = 30 + 'px'; });
实际上，当我们使用这种方法时，浏览器会对其样式进行一次又一次的渲染。即渲染多次之后得到最后样式，那么，如何只让浏览器渲染一次就得到该效果呢？下面我们就一起来看看如何操作吧。
下面是该实例操作的一些样式和html。
HTML：
<button id="bt1">点击按钮修改样式</button> <div id="box" class="b1"></div>
CSS：
.b1{ margin-top: 20px; background-color: antiquewhite; width: 150px; height: 150px; } .b2{ margin-top: 20px; /* width: 30px; */ height: 300px; background-color: aqua; }
b1样式：
b2样式：
b1 b2样式：
直接修改类名
可直接修改类名，将b1样式修改为b2样式。
btn.addEventListener('click',()=>{ box.className = 'b2'; });
添加b2样式
这里需要判断className中是否存在b2样式，若不存在则添加。
判断是否存在
定义一个函数来判断b2是否存在。
obj - 需要修改的对象
cn - class名
若存在，返回true，反之，返回false
function hasClass(obj,cn){ let reg = new RegExp("\\b" + cn + "\\b"); return reg.test(obj.className); // alert(reg); }
定义一个添加函数
obj - 需要修改的对象
cn - class名
//添加class function addClass(obj,cn){ obj.className += ' '+ cn; }
调用添加：若无b2，则添加。
btn.addEventListener('click',()=>{ if(!hasClass(box,'b2')){ addClass(box,'b2'); }; });
删除样式
定义一个删除函数：
obj - 需要修改的对象
cn - class名
function removeClass(obj,cn){ let reg = new RegExp("\\b" + cn + "\\b"); obj.className = obj.className.replace(reg,""); }
调用删除函数：
btn.addEventListener('click',()=>{ removeClass(box,'b2'); });
替换样式
有则删除，无则添加。
定义一个替换函数
obj - 需要修改的对象
cn - class名
function toggleClass(obj,cn){ if(hasClass(obj,cn)){ removeClass(obj,cn); }else{ addClass(obj,cn); }; }
调用替换函数
btn.addEventListener('click',()=>{ toggleClass(box,'b2'); });
对CSDN社区管理菜单栏的优化
前一阵听到有大佬反馈csdn社区管理的菜单栏的问题，让我们先看看怎么个事儿
首先这是csdn社区管理的菜单栏：
存在的问题就是，对于屏幕较小的用户将所有菜单展开后，不能向下滚动。例如将所有菜单打开之后，管理员那栏就被隐藏了，需要再次将其他菜单栏关闭才能够显示。
优化方案：
打开下一个菜单栏立即关闭上一个菜单栏。
如图：
CSS：
.box{ width: 256px; height: 760px; background-color: #515a6e; text-align: center; } .csdnImg{ /* position: relative; */ height: 40px; width: 150px; line-height: 32px; } .webImg{ width: 24px; height: 24px; margin-right: 8px; border-radius: 2px; } #suliang{ display: inline-block; height: 24px; text-align: center; font-size: 20px; color: #fff; font-weight: 500; white-space: nowrap; line-height: 100%; /* background-color: antiquewhite; */ cursor: pointer; } .childDiv{ display: flex; flex-direction: column; align-items: center; overflow: hidden; width: 256px; position: relative; margin-bottom: 5px; box-sizing: border-box; transition:all 0.5s; height: 170px; } .menuList{ border: 2px gray solid; width: 230px; border-radius: 10px; padding: 14px 24px; /* position: absolute; */ cursor: pointer; height: 52px; box-sizing: border-box; text-align:justify; } .menuList>img{ width: 20px; height: 20px; /* align:top; */ margin-right: 5px; } .menuList:hover{ color: #fff; transition: 0.4s; } a{ text-decoration: none; color: #191a23; margin: 10px; } a:hover{ color: #fff; transition: 0.4s; } .change{ height: 52px; transition: 0.6s; }
HTML：
<div class="box"> <img src="https://csdnimg.cn/release/ccloud/img/ccloud-logo.fdf3c711.png" alt="" class="csdnImg"> <br> <!-- <img src="https://img-community.csdnimg.cn/avatar/cbe53133b4e84b59917aefeaeacb6615.jpg?x-oss-process=image/resize,m_fixed,h_88,w_88" alt="" class="webImg"> --> <p id="suliang"><img src="https://img-community.csdnimg.cn/avatar/cbe53133b4e84b59917aefeaeacb6615.jpg?x-oss-process=image/resize,m_fixed,h_88,w_88" alt="" class="webImg" align="top">前端修炼社（苏凉）</p> <div class="childDiv"> <span class="menuList"><img src="../img/用户.png" alt="" align="top"> 用户</span> <a href="#">用户管理</a> <a href="#">用户配置</a> </div> <div class="childDiv change"> <span class="menuList"><img src="../img/内容模型设置.png" alt="" align="top">内容</span> <a href="#">内容管理</a> <a href="#">内容收录</a> </div> <div class="childDiv change"> <span class="menuList"> <img src="../img/137设置、系统设置、功能设置、属性-线.png" alt="" align="top">功能配置</span> <a href="#">频道管理</a> <a href="#">信息管理</a> <a href="#">广告位配置</a> </div> <div class="childDiv change"> <span class="menuList"> <img src="../img/管理员.png" alt="" align="top">管理员</span> <a href="#">管理员配置</a> </div> </div>
JS：
//获取span标签 let menuList = document.getElementsByClassName('menuList'); //获取div let childDiv = document.getElementsByClassName('childDiv'); let open = childDiv[0]; // let childDivHeight = childDiv.offsetHeight; // alert(childDivHeight) //给span绑定单击响应函数 for(let i=0;i<menuList.length;i++){ menuList[i].addEventListener('click',function(){ // alert('11') let parentDiv = this.parentNode; // alert(parentDiv.offsetHeight) toggleClass(parentDiv,'change') if(parentDiv != open && !hasClass(open,'change')){ toggleClass(open,'change') }; open = parentDiv; }) } //判断是否含有clsssname function hasClass(obj,cn){ let reg = new RegExp("\\b" + cn + "\\b"); return reg.test(obj.className); // alert(reg); } //添加class function addClass(obj,cn){ // let reg = new RegExp("\\b" + cn + "\\b"); obj.className += ' '+ cn; } //删除class function removeClass(obj,cn){ let reg = new RegExp("\\b" + cn + "\\b"); obj.className = obj.className.replace(reg,""); } //替换class function toggleClass(obj,cn){ if(hasClass(obj,cn)){ removeClass(obj,cn); }else{ addClass(obj,cn); }; }
