在網頁開發中，經常需要通過修改CSS樣式來實現一些特定的效果。而JavaScript作為一門常用的腳本語言，可以通過操作DOM元素來修改頁面的CSS，靈活性非常高。下面就來介紹一下JavaScript如何修改CSS。
CSS的樣式可以分為內聯樣式表、嵌入式樣式表和外部樣式表。其中，內聯樣式表以style屬性出現，具有最高的優先級；嵌入式樣式表則被定義在head標簽內的style標簽中；外部樣式表則被寫在一個CSS文件中，通過link標簽引入。在JavaScript中修改CSS的方式也不盡相同，下面分別來介紹。
首先是內聯樣式表的修改方式。這種方式比較簡單，只需要直接修改元素的style屬性即可，例如：
<body>
<p id="change_style" style="color: red;">這是需要修改樣式的段落</p>
<button onclick="changeColor()">點擊修改顏色</button>
<script>
function changeColor() {
document.getElementById("change_style").style.color = "blue";
}
</script>
</body>以上代碼中，點擊按鈕后，通過JavaScript獲取ID為change_style的元素，并將其style屬性中的color屬性值修改為"blue"，從而達到修改樣式的目的。
接下來是嵌入式樣式表的修改方式。這種方式也比較簡單，只需要通過document對象的head屬性獲取到head標簽，并且再通過innerHTML改變head標簽內的style標簽內容即可，例如：
<body>
<button onclick="changeStyle()">點擊修改樣式</button>
<script>
function changeStyle() {
document.head.innerHTML += "<style> body {background-color: beige;} </style>";
}
</script>
</body>以上代碼中，點擊按鈕后，通過JavaScript獲取到head標簽，并通過innerHTML方法獲取到其中的style標簽。現在再通過加號相連，將其設為原內容加上新內容即原有CSS樣式加上新的CSS樣式。這樣就可以通過JavaScript修改嵌入式樣式表了。
最后是外部樣式表的修改方式。這種方式比較復雜，需要添加或刪除link標簽。其中，添加link標簽需要在head標簽中添加一個新的link標簽，而刪除link標簽則需要先找到原有的link標簽，再通過removeChild方法移除掉。下面是一個修改外部樣式表的例子：
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button onclick="addStyle()">添加CSS樣式</button>
<button onclick="removeStyle()">刪除CSS樣式</button>
<script>
function addStyle() {
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "new_style.css";
document.head.appendChild(link);
}
function removeStyle() {
var list = document.getElementsByTagName("link");
for (var i = 0; i < list.length; i++) {
if (list[i].href === "style.css") {
document.head.removeChild(list[i]);
break;
}
}
}
</script>
</body>以上代碼中，點擊添加CSS樣式按鈕后，先通過createElement方法創建一個新的link標簽，并將其rel屬性設為"stylesheet"，并將href屬性設為所需的CSS樣式表文件地址。接著，再通過appendChild將其添加到head標簽內。而刪除CSS樣式則是通過getElementsByTagName獲取到head標簽內的所有link標簽，再通過遍歷判斷其href屬性是否為需要刪除的CSS樣式表文件地址，如果找到則通過removeChild方法移除掉該link標簽。
總之，在JavaScript中修改CSS樣式表的方式有三種，通過操作內聯樣式表、嵌入式樣式表和外部樣式表都可以實現。而要根據不同的需求選擇不同的方式來達到修改樣式的目的。