如何用JavaScript動態變更CSS類別（樣式表）？要在JavaScript中更改類別名，需要更改元素的className屬性。本篇文章就來介紹用JavaScript動態改變CSS（樣式表）類別的程式碼。
我們來直接看一個範例
#建立下列HTML檔。
JavaScriptChangeCssClass.html
<!DOCTYPE html><html><head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function buttonClick() {
target = document.getElementById("important");
if (target != null) {
target.className = "importantText";
}
}
</script>
<link rel="stylesheet" type="text/css" href="JavaScriptChangeCssClass.css"/>
</head>
<body>
<p>这篇文章是很<span id="important">重要</span>的，需要特别注意。</p>
<input id="Button1" type="button" value="button" onclick="buttonClick();"/>
</body>
</html>JavaScriptChangeCssClass.css
.importantText{
font-weight:700;
color:#FF0000;
}說明：
點擊按鈕，就會執行下列程式碼部分
function buttonClick() {
target = document.getElementById("important");
if (target != null) {
target.className = "importantText";
}
} target = document.getElementById("important");因此，ID獲得important的元素。在這種情況下，你可以得到“重要”的元素。
if (target != null) {
target.className = "importantText";
}如果可以取得元素，則它是非null值，因此執行if語句的內部。透過指派className屬性，您可以設定元素的類別。在此範例中，「importantText」設定為類別名稱。
根據這個處理
<span id="important" class="importantText">重要</span>
改變了狀態。
執行結果
使用網頁瀏覽器顯示上述HTML檔案。將顯示如下所示的效果。
點選「button」按鈕，則會顯示下列效果，「重要」變成紅色的字體
以上就是本篇文章的全部內容了，更多相關的精彩內容大家可以移步到php中文網的JavaScript影片教學專欄進一步學習！ ！ ！
以上是如何用JavaScript動態變更CSS樣式表的詳細內容。更多資訊請關注PHP中文網其他相關文章！
