下拉改變 CSS 樣式是一種非常常見的交互效果。它可以讓用戶自由選擇樣式和展現方式，提升用戶體驗。下面我們來介紹如何用 HTML 和 JavaScript 實現這個效果。

/* CSS 樣式 */
.select-style {
margin: 50px auto;
width: 200px;
display: inline-block;
background-color: #eee;
padding: 10px;
border-radius: 5px;
font-size: 18px;
}
h1 {
font-size: 32px;
}
p {
font-size: 24px;
line-height: 1.5;
}
/* JavaScript 代碼 */
const selectStyle = document.querySelector('.select-style');
const h1 = document.querySelector('h1');
const p = document.querySelector('p');
selectStyle.addEventListener('change', e =>{
switch(e.target.value) {
case 'style1':
h1.style.fontSize = '32px';
p.style.fontSize = '24px';
p.style.lineHeight = '1.5';
break;
case 'style2':
h1.style.fontSize = '36px';
p.style.fontSize = '28px';
p.style.lineHeight = '1.6';
break;
case 'style3':
h1.style.fontSize = '40px';
p.style.fontSize = '32px';
p.style.lineHeight = '1.7';
break;
default:
h1.style.fontSize = '32px';
p.style.fontSize = '24px';
p.style.lineHeight = '1.5';
}
});

首先定義了一個 select-style 類，它包含了一個下拉選擇框。在 JavaScript 中，我們定義了三個變量：selectStyle、h1 和 p，分別表示選擇框、標題和正文。當選擇框的值發生變化時，我們使用 switch 語句判斷選中的值，并動態修改標題和正文的樣式。