html列表中的按钮样式,使用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;

}

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