html5 切换按钮样式,CSS使用classList实现两个按钮样式的切换

classList属性的方法：add();remove();toggle();

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

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

html部分:

注册

登陆

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;

}

总结

以上所述是小编给大家介绍的CSS使用classList实现两个按钮样式的切换，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！