下面我就為大家分享一篇使用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; }
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
#使用webpack打包處理bundle.js檔案過大的問題
以上是classList如何實作兩個按鈕樣式切換的詳細內容。更多資訊請關注PHP中文網其他相關文章!