鼠標單擊改變CSS樣式是一種常見的交互方式，特別適合用于動態展示各種效果。下面我們來看一下如何使用JavaScript實現這一效果。

var btn = document.querySelector('button');
var box = document.querySelector('.box');
btn.addEventListener('click', function() {
box.style.backgroundColor = 'blue';
box.style.color = 'white';
});

這段代碼中，我們先獲取了一個button元素和一個class為box的div元素。然后給button加上了一個點擊事件監聽器。當按鈕被點擊時，我們就改變了box的背景色和文字顏色。

值得一提的是，CSS樣式也可以用class選擇器來更好地管理。我們可以將樣式寫在CSS文件中，然后通過JavaScript來控制添加或刪除class。

var btn = document.querySelector('button');
var box = document.querySelector('.box');
btn.addEventListener('click', function() {
box.classList.add('blue');
});
// CSS
.blue {
background-color: blue;
color: white;
}

在這個例子中，我們給box元素添加了一個名為blue的class。同時，我們在CSS中定義了blue類的樣式。當點擊按鈕時，我們就會給box元素添加這個類，使得它的背景色和文字顏色發生變化。

總之，鼠標單擊改變CSS樣式是一種實現動態效果的簡單有效的方式，適用于各種場景，可以讓頁面更加生動有趣。