文章目录
- 前言
- 直接修改类名
- 添加b2样式
- 删除样式
- 替换样式
- 对CSDN社区管理菜单栏的优化
前言
在此之前，我们对一个元素的样式进行修改，需要对其所有样式逐一更改，如下所示：
//获取按钮和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);
};
}
欢迎大家加入我的社区一起讨论：
前端修炼社
