使用Javascript根据当前选择更改样式

<select id="styleSelector">
  <option value="default">默认样式</option>
  <option value="dark">黑色主题</option>
  <option value="light">浅色主题</option>
</select>
<div id="content">
  <p>这是一个示例文本。</p>
</div>

// 获取选择框元素和内容区域元素
var styleSelector = document.getElementById('styleSelector');
var content = document.getElementById('content');

// 监听选择框的change事件
styleSelector.addEventListener('change', function() {
  // 获取当前选择的值
  var selectedStyle = styleSelector.value;

  // 根据选择的值修改样式
  if (selectedStyle === 'default') {
    content.style.backgroundColor = '#fff';
    content.style.color = '#000';
  } else if (selectedStyle === 'dark') {
    content.style.backgroundColor = '#222';
    content.style.color = '#fff';
  } else if (selectedStyle === 'light') {
    content.style.backgroundColor = '#f8f8f8';
    content.style.color = '#333';
  }
});