使用classList來實現兩個按鈕樣式的切換方法，classlist樣式

使用classList來實現兩個按鈕樣式的切換方法，classlist樣式

classList屬性的方法：add();remove();toggle();

描述，在一些頁面我們需要使用兩個按鈕來回切換，

我們要使用到add()和remove()方法

html部分:

<div 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></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來實現兩個按鈕樣式的切換方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。