AJAX（Asynchronous JavaScript and XML）是一種用于創建交互性網頁應用程序的技術，通過在后臺與服務器進行數據交換，實現動態更新網頁內容的功能。其中，AJAX技術也可以被用來更改CSS樣式，從而實現網頁的動態外觀效果。通過使用AJAX技術，我們可以在不刷新整個網頁的情況下，僅僅通過更改CSS樣式來達到想要的效果。

舉個例子來說明，假設我們有一個按鈕，點擊該按鈕將改變某個元素的背景顏色。使用傳統的Web開發方法，我們需要先定義多種按鈕的樣式，然后通過JavaScript來監聽按鈕的點擊事件，并在點擊事件發生時動態地為該元素分配不同的樣式類。但是，使用AJAX技術，我們只需將按鈕的點擊事件與服務器端交互，獲得需要改變的背景顏色，然后通過JavaScript將顏色值直接應用于該元素的CSS樣式中。

<button id="change-color-button">改變顏色</button>
<div id="target-element">這是一個例子</div>
<script>
document.getElementById("change-color-button").onclick = function() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("target-element").style.backgroundColor = this.responseText;
}
};
xhttp.open("GET", "get-color.php", true);
xhttp.send();
};
</script>

在上述的例子中，我們首先定義了一個按鈕和一個要改變樣式的目標元素。當按鈕被點擊時，通過AJAX請求向服務器發送一個GET請求，并使用XMLHttpRequest來處理服務器的響應。在服務器調用get-color.php文件之后，我們得到的響應將作為背景顏色值應用到目標元素的CSS樣式中。這個例子展示了AJAX技術如何用來改變CSS樣式的功能。

除了改變背景顏色，我們還可以通過AJAX技術實現其他的CSS樣式更改。例如，我們可以使用AJAX來更改文本的字體、字體大小、文本顏色等等。通過向服務器發送請求并獲取相應的樣式定義，我們可以在不刷新網頁的情況下實時更新頁面的外觀效果。

<button id="change-style-button">改變樣式</button>
<p id="target-text">這是一個例子</p>
<script>
document.getElementById("change-style-button").onclick = function() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var style = JSON.parse(this.responseText);
document.getElementById("target-text").style.fontFamily = style.fontFamily;
document.getElementById("target-text").style.fontSize = style.fontSize;
document.getElementById("target-text").style.color = style.color;
}
};
xhttp.open("GET", "get-style.php", true);
xhttp.send();
};
</script>

以上的例子展示了如何通過AJAX技術來更改文本的字體、字體大小和文本顏色。通過向服務器發送AJAX請求，并將響應解析為JSON格式的樣式定義，我們可以在按鈕點擊事件發生時動態地應用這些樣式到目標文本上。這樣，我們可以根據不同的用戶操作或服務器返回的數據來實現網頁的定制化外觀效果。

通過AJAX技術更改CSS樣式可以增加網頁的交互性和動態性。不需要進行整個網頁的刷新，只需通過AJAX與服務器進行數據交換，然后直接更改指定元素的CSS樣式即可。這種方法大大提高了用戶體驗，并且減少了對服務器的請求，從而提高了整體性能。通過合理利用AJAX技術，我們可以開發出更具吸引力和動感的網頁應用程序。