目前，網頁上多數格式都是利用CSS定義，很少使用HTML 屬性，所以用程式更改CSS屬性可以獲得更豐富的效果。
利用JavaScript可以修改HTML標籤所設定的CSS屬性，這樣就可以改變標籤的樣式。
用JavaScript修改標籤的樣式主要有兩種做法：一是用另一個CSS樣式表代替標籤現在CSS樣式表，二是直接修改標籤的CSS樣式表中的屬性。
用JS修改標籤的 class 屬性值：
class 屬性是在標籤上引用樣式表的方法之一，它的值是一個樣式表的選擇符，如果改變了 class 屬性的值，標籤所引用的樣式表也就更換了，所以這屬於第一種修改方法。
更改一個標籤的 class 屬性的代碼是： document.getElementById( id ).className = 字串;
document.getElementById( id ) 用於擷取標籤對應的 DOM 對象，你也可以用其它方法擷取。className 是 DOM 對象的一個屬性，它對應於標籤的 class 屬性。字串 是 class 屬性的新值，它應該是一個已定義的CSS選擇符。
利用這種辦法可以把標籤的CSS樣式表替換成另外一個，也可以讓一個沒有應用CSS樣式的標籤應用指定的樣式。
舉例： <style type="text/css">
.txt {
font-size: 30px; font-weight: bold; color: red;
}
</style>
<div id="tt">歡迎光臨。</div>
<p><button onclick="setClass()">更改樣式</button></p>
<script type="text/javascript">
function setClass()
{
document.getElementById( "tt" ).className = "txt";
}
</script>
效果為： 歡迎光臨。
本例中，按鈕用來調用JS函數，在JS函數中，為 <div id="tt"> 標籤設定了 class 屬性值，把 .txt 樣式應用在該標籤上。
用JS修改標籤的 style 屬性值：
style 屬性也是在標籤上引用樣式表的方法之一，它的值是一個CSS樣式表。DOM 對象也有 style 屬性，不過這個屬性本身也是一個對象，Style 對象的屬性和 CSS 屬性是一一對應的，當改變了 Style 對象的屬性時，對應標籤的 CSS 屬性值也就改變了，所以這屬於第二種修改方法。
更改一個標籤的 CSS 屬性的代碼是： document.getElementById( id ).style.屬性名稱 = 值;
document.getElementById( id ) 用於擷取標籤對應的 DOM 對象，你也可以用其它方法擷取。style 是 DOM 對象的一個屬性，它本身也是一個對象。屬性名稱 是 Style 對象的屬性名稱，它和某個CSS屬性是相對應的。
說明：這種方法修改的單一的一個CSS屬性，它不影響標籤上其它CSS屬性值。
注意：多數 Style 對象的屬性名稱和 CSS 屬性名稱是不同名的，且 Style 對象的屬性名稱要區分大小寫。
比如：CSS的 font-size 屬性對應於 Style 對象的 fontSize 屬性，CSS的 margin-top 屬性對應於 Style 對象的 marginTop 屬性。
舉例： <div id="t2">歡迎光臨。</div>
<p><button onclick="setSize()">大小</button>
<button onclick="setColor()">顏色</button>
<button onclick="setbgColor()">背景</button>
<button onclick="setBd()">邊框</button>
</p>
<script type="text/javascript">
function setSize()
{
document.getElementById( "t2" ).style.fontSize = "30px";
}
function setColor()
{
document.getElementById( "t2" ).style.color = "red";
}
function setbgColor()
{
document.getElementById( "t2" ).style.backgroundColor = "blue";
}
function setBd()
{
document.getElementById( "t2" ).style.border = "3px solid #FA8072";
}
</script>
效果為： 歡迎光臨。
可以看到，雖然一些 Style 對象的屬性和 CSS 屬性不同名，但取值方法是完全一樣的，所以我們可以用這種方法修改一個標籤的 CSS 屬性值。
| 附錄：Style 對象 |
| Style對象是一個 DOM 對象的子物件，它的每個屬性都和CSS的屬性相對應。 Style對象的引用方法是： DOM對象.style.Style屬性名稱 Style 對象的屬性和 CSS 屬性的區別是： Style 屬性要區分大小寫，CSS 屬性不區分大小寫。 由單個單詞命名的 Style 屬性和 CSS 屬性同名。如：color、border、margin、width、height 等。只有一個特例，CSS 的 float 屬性對應的 Style 屬性是 styleFloat 或 cssFloat。 由多個單片語成的 Style 屬性命名方法是：第一個單詞小寫，其後的單字首大寫。而 CSS 屬性是單詞間用“-”分隔。如：font-family 對應於 fontFamily，background-image 對應於 backgroundImage，border-top-width 對應於 borderTopWidth。 用JS程式修改頁面的風格： document.body.style.Style屬性名稱 = 值; document.body 對應的是文檔的 <body> 標籤，它的風格影響的是整個網頁的風格。 如： <script type="text/javascript"> 用JS程式修改標籤的風格： document.getElementById( id ).style.Style屬性名稱 = 值; document.getElementById( id ) 用於擷取擁有指定 id 的標籤，它的風格隻影響這一個標籤的風格。 如： <div id="mark"></div> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
