CSS點(diǎn)擊按鈕設(shè)置div是前端開發(fā)中的常見操作。通過(guò)CSS樣式和JavaScript的結(jié)合，可以實(shí)現(xiàn)在點(diǎn)擊按鈕時(shí)，動(dòng)態(tài)地改變一個(gè)div的樣式。

// HTML部分
<div class="box">這里是要改變樣式的div</div>
<button onclick="changeStyle()">改變樣式</button>
// CSS部分
.box {
width: 200px;
height: 200px;
background-color: yellow;
}
// JavaScript部分
function changeStyle() {
var box = document.querySelector('.box');
box.style.backgroundColor = 'red';
box.style.width = '300px';
box.style.height = '300px';
}

在上述代碼中，首先我們定義了一個(gè)box類的div，然后定義了一個(gè)用于觸發(fā)樣式改變的按鈕。

在CSS部分，我們給box類的div定義了一些基本樣式，包括寬度、高度和背景顏色。這些樣式將在頁(yè)面加載時(shí)生效。

在JavaScript部分，我們定義了一個(gè)changeStyle函數(shù)，用于實(shí)現(xiàn)在按鈕點(diǎn)擊時(shí)改變div的樣式。首先，我們使用querySelector方法獲取box類的div元素對(duì)象。然后，我們使用style屬性的相關(guān)方法修改div的背景顏色、寬度和高度，實(shí)現(xiàn)樣式的改變。

在實(shí)際開發(fā)中，我們可以根據(jù)具體的需求和場(chǎng)景，定義不同的樣式改變操作函數(shù)。例如，我們可以實(shí)現(xiàn)在多個(gè)按鈕點(diǎn)擊時(shí)切換div的不同樣式，或者實(shí)現(xiàn)在鼠標(biāo)懸停時(shí)改變div的樣式等。這些操作都可以通過(guò)CSS和JavaScript的結(jié)合來(lái)實(shí)現(xiàn)。