JavaScript HTML DOM - 改變CSS
JavaScript修改CSS有4種方法：
#修改節點style(內嵌樣式);
改變節點class或id;
寫入新的css;
取代頁面中的樣式表。
不建議使用後兩種方法，幾乎所有的功能都可以透過前兩種方式實現，而且程式碼更加清晰、易於理解。
修改節點style(內聯樣式)
這個方法權重是最高的，直接寫在節點的style屬性上，他會覆寫其他方法設定的樣式。使用方法很簡單：
var element = document.getElementById("test");
element.style.display = "none" //讓元素隱藏
但是要注意的是，有些CSS樣式名稱是由幾個單字組成的例如font-size、background-image等，他們都是用破折號(-)連接起來的，然而JavaScript中破折號表示“減”，因此不能作為屬性名稱。我們需要使用「駝峰格式(camelCase)」來書寫屬性名，例如fontSize、backgroundImage。
還要注意的是，很多style都是有單位的，不能只給一個數字。例如fontSize的單位有px、em、%(百分比)等。
更改class、id
id和class是設定樣式的“鉤子”，更改之後瀏覽器會自動更新元素的樣式。
更改id的方法和class的類似，但個人並不建議這樣使用，因為id是用來定位元素的，最好不要用它來定義元素的顯示樣式，而id也常作為JavaScript的鉤子，可能會造成不必要的錯誤。
在JavaScript中，class是一個保留關鍵字，因此使用className作為存取元素class的屬性，例如：
.redColor{
color: red;
}
#.yellowBack{
##background: yellow ;
}
element.className = "redColor";//設定class
## element.className += " yellowBack";//增加classdocument.getElementById(id).style.property=新樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<h1 id="id1">标题</h1>
<button type="button" onclick="document.getElementById('id1').style.color='blue'">点击改变</button>
</body>
</html>
