JavaScript調(diào)用CSS是Web開發(fā)中常見的操作之一。通過JavaScript來改變文檔樣式，可以讓網(wǎng)頁更加動態(tài)和富有交互性。本文將介紹JavaScript調(diào)用CSS的基本方式和常見操作，并通過舉例說明來讓讀者更加深入理解。
JavaScript可以使用DOM API來調(diào)用CSS樣式。DOM API是JavaScript操作網(wǎng)頁元素的標準接口，它可以讓我們以編程的方式來修改網(wǎng)頁結(jié)構(gòu)和樣式。其中最常用的方法是使用Element.style屬性來修改元素的CSS樣式。比如，我們可以通過下面的代碼來改變一個按鈕的背景顏色：

<button id="myButton">Click me!</button>
<br>
<script>
var button = document.getElementById('myButton');
button.style.backgroundColor = 'red';
</script>

上面的代碼中，我們首先獲取了id為“myButton”的按鈕元素，并通過style屬性來修改其backgroundColor屬性。這樣就能使按鈕的背景顏色變成紅色。
除了Element.style屬性外，我們還可以使用Element.className屬性來修改元素的CSS類。CSS類是一組具有相同樣式規(guī)則的元素，我們可以將這些規(guī)則定義在CSS樣式表里面，并通過JavaScript來動態(tài)修改元素的類名。比如，我們可以通過下面的代碼來為一個div元素添加一個特定的CSS類：

<div id="myDiv">Hello world!</div>
<br>
<script>
var div = document.getElementById('myDiv');
div.className = 'myClass';
</script>

上面的代碼中，我們獲取了id為“myDiv”的div元素，并將其className屬性設(shè)置為“myClass”。通過這個方式，我們可以在CSS樣式表中定義一個“myClass”類，并通過JavaScript來動態(tài)地將其應(yīng)用到任意一個元素上。這樣就能實現(xiàn)整體樣式控制，減少樣式代碼的冗余。
除了Element.style屬性和Element.className屬性，我們還可以使用Document.styleSheets對象來直接操作CSS樣式表。Document.styleSheets對象可以讓我們獲取當前頁面中所有的CSS樣式表，并對其進行增、刪、改、查等操作。比如，我們可以通過下面的代碼來動態(tài)插入一段新的CSS規(guī)則：

<script>
var newRule = 'h1 { color: red; }';
var style = document.createElement('style');
style.appendChild(document.createTextNode(newRule));
document.head.appendChild(style);
</script>

上面的代碼中，我們首先構(gòu)造了一條CSS規(guī)則“h1 { color: red; }”，然后創(chuàng)建了一個style標簽，并通過appendChild方法將規(guī)則文本添加到該標簽中。最后，我們將該標簽添加到head標簽中，從而讓新的CSS規(guī)則生效。通過這種方式，我們可以動態(tài)改變DOM的樣式，并為網(wǎng)頁增加交互性和動態(tài)效果。
總體來說，通過JavaScript調(diào)用CSS樣式是Web開發(fā)中非常有用的技術(shù)。除了上面介紹的屬性和對象外，還有很多方法可以用于動態(tài)修改樣式，比如使用document.querySelector方法來查找符合特定規(guī)則的元素，并修改其樣式。使用這些技術(shù)，我們可以創(chuàng)造出更加豐富、動態(tài)、漂亮的Web頁面，提高用戶的使用體驗。