CSS使用classList实现两个按钮样式的切换
网站建设 2023-01-28 21:38www.1681989.com免费网站
classList属性的方法add();remove();toggle();
描述，在一些页面我们需要使用两个按钮来回切换，如图
我们要使用到add()和remove()方法
html部分:
<div class="log-title"> <a href="javascript:void(0)" class="mya1" id="mya" onclick="myonclick()">注册</a> <a href="javascript:void(0)" class="mya2" id="myaa" onclick="myonclick1()">登陆</a> </div>
js部分:
funtion myonclick(){
document.getElementById("mya").classList.remove("newClassName1");
document.getElementById("myaa").classList.remove("newClassName");
}
function myonclick1(){
document.getElementById("mya").classList.add("newClassName1");
document.getElementById("myaa").classList.add("newClassName");
}
css部分:
.log-title{
width:200px;
height:200px;
marg: 0 auto;
background-color:antiquewhite;
}
.mya2{
paddg: 0 20px 10px 20px;
color:#FFFFFF;
font-size:22px;
text-decoration:none;
}
.mya1{
paddg:0 20px 10px 20px;
color:#7F4A88;
font-size:22px;
text-decoration:none;
border-bottom:2px solid #7F4A88;
}
.newClassName{
paddg:0 20px 10px 20px;
color:#7F4A88;
font-size:22px;
text-decoration:none;
border-bottom:2px solid #7F4A88;
}
.newClassName1{
paddg: 0 20px 10px 20px;
color:#FFFFFF;
font-size:22px;
text-decoration:none;
}
以上所述是长沙网络推广给大家介绍的CSS使用classList实现两个按钮样式的切换，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！