欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用classList来实现两个按钮样式的切换方法

程序员文章站 2022-04-29 12:15:25
classlist属性的方法:add();remove();toggle(); 描述,在一些页面我们需要使用两个按钮来回切换,如图: 我们要使用到add()和rem...

classlist属性的方法:add();remove();toggle();

描述,在一些页面我们需要使用两个按钮来回切换,如图:

使用classList来实现两个按钮样式的切换方法

我们要使用到add()和remove()方法

html部分:

<div class="login-title">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="mya1" id="mya" onclick="myonclick()">注册</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="mya2" id="myaa" onclick="myonclick1()">登陆</a>
</div>

js部分:

funcction 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部分:

.login-title{
width:200px;
height:200px;
margin: 0 auto;
background-color:antiquewhite;
}
.mya2{
padding: 0 20px 10px 20px;
color:#ffffff;
font-size:22px;
text-decoration:none;
}
.mya1{
padding:0 20px 10px 20px;
color:#7f4a88;
font-size:22px;
text-decoration:none;
border-bottom:2px solid #7f4a88;
}
.newclassname{
padding:0 20px 10px 20px;
color:#7f4a88;
font-size:22px;
text-decoration:none;
border-bottom:2px solid #7f4a88;
}
.newclassname1{
padding: 0 20px 10px 20px;
color:#ffffff;
font-size:22px;
text-decoration:none;
}

使用classList来实现两个按钮样式的切换方法

以上这篇使用classlist来实现两个按钮样式的切换方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。