[前端] js點選按鈕改變樣式
阿新 • • 發佈：2019-01-31
有時候我們希望實現點選按鈕並切換樣式的效果，一個簡單的方法是連結到另一個頁面，但是，在有些情況下，我們不希望這麼做，因為我們改變的只是頁面的很小一部分，我們沒有必要為了這一小部分而重新整理整個介面。
另外，當我們希望在一個頁面實現不同控制元件的樣式切換時，比如第一個控制元件有4種切換方式，第二種控制元件有3種切換方式，那麼這就意味著我們需要實現4X3 = 12種不同的頁面，這是繁瑣而沒有必要的。
我們只需要一段簡單的js程式碼就能實現這個功能，實現原理是當捕捉到type = "button"的按鈕事件時，我們直接修改它的樣式（通過class屬性）。
此外，如果想要實現按鈕切換下頁面文字的改變等效果，可以給每個控制元件設定一個display屬性，通過在響應事件中修改它的顯示/隱藏屬性。也就是說，一開始，我們把所有的東西都畫了出來，只不過沒有顯示出來而已。（當然，如果涉及到資訊保安問題，這樣“裸露”的寫法是不可行的）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js控制按鈕樣式切換</title> <link href="css/my.css" rel="stylesheet"> </head> <script type="text/javascript"> //左邊按鈕的點選事件 window.onload = function(){ var arr = document.getElementsByTagName('button'); for(var i = 0;i<arr.length;i++){ arr[i].onclick = function(){ //this是當前啟用的按鈕，在這裡可以寫對應的操作 if(this.className == 'btn1'){ this.className = 'btn2'; var name = this.id; var btn = document.getElementsByClassName('btn2'); for(var j=0;j<btn.length;j++){ if(btn[j].id!=name){ btn[j].className = 'btn1'; } } } } } } </script> <body> <div id="main" style="margin:auto 0"> <!--四個按鈕--> <div style="margin-top:2em;" align="center"> <div style="width:20%"><button id = "1" type = "button" class = "btn2"> 按鈕1</button></div> <div style="width:20%"><button id = "2" type = "button" class = "btn1"> 按鈕2</button></div> <div style="width:20%"><button id = "3" type = "button" class = "btn1"> 按鈕3</button></div> <div style="width:20%"><button id = "4" type ="button" class = "btn1"> 按鈕4</button></div> </div> </div> </body> </html>
我們把樣式寫在my.css中：
.btn1{ border:none; height:3.5em; background-color:#000000; color:white; font-size:1.2em; margin-top:0.5em; width:100%; border-radius:1em; } .btn2{ border:none; height:3.5em; background-color:#3E8CD0; color:white; font-size:1.2em; margin-top:0.5em; width:100%; border-radius:1em; }