classList如何实现两个按钮样式切换
程序员文章站
2022-03-25 10:43:22
...
下面我就为大家分享一篇使用classList来实现两个按钮样式的切换方法,具有很好的参考价值,希望对大家有所帮助。
classList属性的方法:add();remove();toggle();
描述,在一些页面我们需要使用两个按钮来回切换,如图:
我们要使用到add()和remove()方法
html部分:
<p 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> </p>
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如何实现两个按钮样式切换的详细内容,更多请关注其它相关文章!