文章目录
前言
在此之前，小程序开发定制我们对一个元素的样式进行修改，小程序开发定制需要对其所有样式逐一更改，如下所示：
//小程序开发定制获取按钮和divlet 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';});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
实际上，当我们使用这种方法时，浏览器会对其样式进行一次又一次的渲染。即渲染多次之后得到最后样式，那么，如何只让浏览器渲染一次就得到该效果呢？下面我们就一起来看看如何操作吧。
下面是该实例操作的一些样式和html。
HTML：
<button id="bt1">点击按钮修改样式</button><div id="box" class="b1"></div>- 1
- 2
CSS：
.b1{ margin-top: 20px; background-color: antiquewhite; width: 150px; height: 150px;}.b2{ margin-top: 20px; /* width: 30px; */ height: 300px; background-color: aqua;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
b1样式：
b2样式：
b1 b2样式：
直接修改类名
可直接修改类名，将b1样式修改为b2样式。
btn.addEventListener('click',()=>{ box.className = 'b2';});- 1
- 2
- 3
添加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); }- 1
- 2
- 3
- 4
- 5
定义一个添加函数
obj - 需要修改的对象
cn - class名
//添加classfunction addClass(obj,cn){ obj.className += ' '+ cn; }- 1
- 2
- 3
- 4
调用添加：若无b2，则添加。
btn.addEventListener('click',()=>{if(!hasClass(box,'b2')){ addClass(box,'b2'); };});- 1
- 2
- 3
- 4
- 5
删除样式
定义一个删除函数：
obj - 需要修改的对象
cn - class名
function removeClass(obj,cn){ let reg = new RegExp("\\b" + cn + "\\b"); obj.className = obj.className.replace(reg,"");}- 1
- 2
- 3
- 4
调用删除函数：
btn.addEventListener('click',()=>{ removeClass(box,'b2');});- 1
- 2
- 3
替换样式
有则删除，无则添加。
定义一个替换函数
obj - 需要修改的对象
cn - class名
function toggleClass(obj,cn){ if(hasClass(obj,cn)){ removeClass(obj,cn); }else{ addClass(obj,cn); }; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
调用替换函数
btn.addEventListener('click',()=>{ toggleClass(box,'b2'); });- 1
- 2
- 3
对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; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
JS：
//获取span标签let menuList = document.getElementsByClassName('menuList');//获取divlet 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; })}//判断是否含有clsssnamefunction hasClass(obj,cn){ let reg = new RegExp("\\b" + cn + "\\b"); return reg.test(obj.className); // alert(reg);}//添加classfunction addClass(obj,cn){ // let reg = new RegExp("\\b" + cn + "\\b"); obj.className += ' '+ cn;}//删除classfunction removeClass(obj,cn){ let reg = new RegExp("\\b" + cn + "\\b"); obj.className = obj.className.replace(reg,"");}//替换classfunction toggleClass(obj,cn){ if(hasClass(obj,cn)){ removeClass(obj,cn); }else{ addClass(obj,cn); };}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
欢迎大家加入我的社区一起讨论：