用JavaScript修改CSS屬性
目前，網頁上多數格式都是利用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物件的引用方法是：
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 對應的是文件的 <body> 標籤，它的風格影響的是整個網頁的風格。 如： <script type="text/javascript">document.body.fontFamily = "宋體"; document.body.fontSize = "16px"; document.body.backgroundImage = "url(./image/bg.gif)"; </script> 用JS程式修改標籤的風格：
document.getElementById( id ) 用於獲取擁有指定 id 的標籤，它的風格隻影響這一個標籤的風格。 如： <div id="mark"></div><script type="text/javascript"> document.getElementById( "mark" ).width = "40%"; document.getElementById( "mark" ).textAlign = "center"; </script> |