下面小编就为大家分享一篇使用classList来实现两个按钮样式的切换方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
classList属性的方法：add();remove();toggle();
描述，在一些页面我们需要使用两个按钮来回切换，如图：
我们要使用到add()和remove()方法
html部分:
<div> <a href="javascript:void(0)">注册</a> <a href="javascript:void(0)">登陆</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来实现两个按钮样式的切换方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: