在前端開(kāi)發(fā)中，JavaScript與CSS的結(jié)合是非常常見(jiàn)的。下面我們來(lái)看一些例子。

/* CSS */
button {
color: white;
font-size: 16px;
padding: 10px 20px;
background-color: #3498db;
border-radius: 5px;
border: none;
cursor: pointer;
}
/* JavaScript */
let button = document.querySelector('button');
button.addEventListener('mouseover', function() {
this.style.backgroundColor = '#2c3e50';
});
button.addEventListener('mouseout', function() {
this.style.backgroundColor = '#3498db';
});

在這個(gè)例子中，我們定義了一個(gè)button樣式，并給它添加了鼠標(biāo)移動(dòng)事件。當(dāng)鼠標(biāo)移動(dòng)到按鈕上時(shí)，我們通過(guò)JavaScript代碼改變按鈕背景顏色，當(dāng)鼠標(biāo)移開(kāi)時(shí)，按鈕又恢復(fù)了原來(lái)的背景顏色。

/* CSS */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
border-radius: 50%;
}
/* JavaScript */
let box = document.querySelector('.box');
let rotateDeg = 0;
setInterval(function() {
rotateDeg += 5;
box.style.transform = `rotate(${rotateDeg}deg)`;
}, 50);

在這個(gè)例子中，我們定義了一個(gè).container容器樣式，把它設(shè)為flex布局，并用justify-content和align-items屬性來(lái)設(shè)置其子元素在水平和垂直方向上的居中。我們還定義了一個(gè).box元素樣式，將其設(shè)定為圓圈形狀，并設(shè)置了背景顏色。在JavaScript代碼中，我們用setInterval函數(shù)來(lái)循環(huán)執(zhí)行一個(gè)函數(shù)，每執(zhí)行一次函數(shù)，.box元素就會(huì)偏移rotateDeg度，從而達(dá)到旋轉(zhuǎn)的效果。