JavaScript HTML DOM - 改變CSS
JavaScript修改CSS有4種方法：
修改節(jié)點(diǎn)style(內(nèi)聯(lián)樣式);
改變節(jié)點(diǎn)class或id;
寫(xiě)入新的css;
替換頁(yè)面中的樣式表。
不建議使用后兩種方法，幾乎所有的功能都可以通過(guò)前兩種方式實(shí)現(xiàn)，并且代碼更加清晰、易理解。
修改節(jié)點(diǎn)style(內(nèi)聯(lián)樣式)
這種方法權(quán)重是最高的，直接寫(xiě)在節(jié)點(diǎn)的style屬性上，他會(huì)覆蓋其他方法設(shè)置的樣式。使用方法很簡(jiǎn)單：
var element = document.getElementById("test");
element.style.display = "none" //讓元素隱藏
但是要注意的是，有些CSS樣式名稱(chēng)是由幾個(gè)單詞組成的例如font-size、background-image等，他們都是用破折號(hào)(-)連接起來(lái)的，然而JavaScript中破折號(hào)表示“減”，因此不能作為屬性名稱(chēng)。我們需要使用“駝峰格式(camelCase)”來(lái)書(shū)寫(xiě)屬性名，例如fontSize、backgroundImage。
還要注意的是，很多style都是有單位的，不能只給一個(gè)數(shù)字。例如fontSize的單位有px、em、%(百分比)等。
更改class、id
id和class是設(shè)置樣式的“鉤子”，更改之后瀏覽器會(huì)自動(dòng)更新元素的樣式。
更改id的方法和class的類(lèi)似，但是個(gè)人并不建議這樣使用，因?yàn)閕d是用于定位元素的，最好不要用它來(lái)定義元素的顯示樣式，并且id也常作為JavaScript的鉤子，可能會(huì)引起不必要的錯(cuò)誤。
在JavaScript中，class是一個(gè)保留關(guān)鍵字，因此使用className作為訪(fǎng)問(wèn)元素class的屬性，例如：
.redColor{
color: red;
}
.yellowBack{
background: yellow;
}
element.className = "redColor";//設(shè)置class
element.className += " yellowBack";//增加class
改變 HTML 元素的樣式，一般請(qǐng)使用這個(gè)語(yǔ)法：
document.getElementById(id).style.property=新樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<h1 id="id1">標(biāo)題</h1>
<button type="button" onclick="document.getElementById('id1').style.color='blue'">點(diǎn)擊改變</button>
</body>
</html>
