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

2024-07-11 08:25:16

字体：大中小

来源：转载

供稿：网友

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;}