如何給按鈕(button)設定樣式？

在web開發中，按鈕是一個常用的控制元件，原生的按鈕是沒有樣式的，比較醜。那麼怎麼給按鈕設定樣式呢？本文盤點了幾種方式供大家參考！

操作方法

（01）首先建立一個txt檔案，修改後綴名：把改為，用記事本開啟新增如下程式碼：開啟瀏覽器，這是一個沒有新增樣式的button，外觀不美觀，而且在不同的瀏覽器下顯示的外觀是不一樣的，所以我們要新增統一的樣式！

（02）CSS：style屬性設定。如下程式碼所示：按鈕的樣式是不是好看多了，在其他瀏覽器也會一樣的顯示這個效果。注：如果按鈕樣式比較少、樣式只對該按鈕有效，那麼就可以用style屬性。如下圖程式碼所示，該按鈕樣式比較多，這樣寫讓程式碼不整潔，可閱讀性差，那麼怎麼解決這個問題呢，這就要用style標籤了！

（03）CSS：<style type="text/css"></style>樣式表。如下程式碼所示：style標籤裡面表示的是一個樣式表，我們所有的樣式都可以寫到標籤中去。這段程式碼的意思是：凡是button標籤都使用這個樣式。注：如果希望這個頁面所有的按鈕(button)都使用這個

（04）CSS：<style type="text/css"></style>樣式表 加 class屬性。如下程式碼所示：注意看到程式碼的變化，我們把 樣式表中的  button{}改成了_button{}，然後在button標籤裡面加了class屬性，這樣做的意思是，這個button標籤使用了名字為ui_button的樣式。注：這是開發中比較常用的新增樣式的方式，我們可以對需要新增樣式的按鈕指定一個樣式。

（05）JS：通過javascript動態修改樣式。如下程式碼所示：很多適合我們需要動態的改變樣式，比如使用者提交個人資訊的適合，為了避免使用者多次點選提交按鈕重複提交資訊，我們可以在使用者點選提交按鈕之後，禁用按鈕，並設定按鈕字型的顏色為灰色。

（06）JS：修改樣式的其他方法：ext = "color:#E1E1E1;background-color:black;";cssText可以寫多個樣式樣式屬性。如下面程式碼：

（07）JS：修改樣式的其他方法：ttribute("class", "style2");直接更改按鈕標籤的class屬性，把指向名為ui_button的樣式改為指向名為style2的樣式。如下面程式碼：

（08）JS：修改樣式的其他方法：<link href="" rel="stylesheet" type="text/css" id="css"/>ttribute("href","");修改引用外部的樣式表文件，這樣就可以對整個頁面的樣式進行全部更新！如下面程式碼：