如何通过JavaScript下拉选项切换Div的阴影样式？

原代码的问题点： #

• HTML语法错误：
  • select标签的id写成了choose!，多了无效感叹号，正确应为choose
  • 第二个option标签缺失开头的<，且错误用)闭合，正确格式是<option value="02">shadow02</option>
  • Div的padding: zOpx是拼写错误，应为padding: 20px
  • 第三个option内的阴影CSS语法混乱：rgb括号未闭合、reb是rgb笔误，换行导致语法断裂，且给option加box-shadow完全无效，阴影需要作用在目标Div上
• JavaScript逻辑错误：
  • 原函数仅获取第一个选项的文本，还替换了Div内容，完全偏离了切换阴影的需求，正确逻辑应该是获取选中选项的值，再给Div设置对应阴影样式

修正后的完整代码： #

<div id="card-shadow-control" style="width: 100px; border: 1px solid black; margin: 20px auto; padding: 20px; text-align: center;">Hello</div>
<select id="choose" onchange="myFunction()">
  <option value="01">shadow01</option>
  <option value="02">shadow02</option>
  <option value="03">shadow03</option>
</select>

<script>
function myFunction() {
  const selectElement = document.getElementById("choose");
  const selectedValue = selectElement.value;
  const targetDiv = document.getElementById("card-shadow-control");
  
  // 根据选中值设置对应阴影样式
  switch(selectedValue) {
    case "01":
      targetDiv.style.boxShadow = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
      break;
    case "02":
      targetDiv.style.boxShadow = "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"; // 可自行修改为你需要的shadow02样式
      break;
    case "03":
      targetDiv.style.boxShadow = "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
      break;
    default:
      targetDiv.style.boxShadow = ""; // 默认清空阴影
  }
}
</script>

说明： #

• 给select添加了onchange事件，选中选项时自动触发切换函数
• 将阴影样式移至JavaScript中，根据选中的value为目标Div设置对应box-shadow
• 修复了所有HTML语法错误，确保标签闭合、属性拼写正确
• 若需调整shadow02的样式，直接修改case "02"中的boxShadow值即可

内容的提问来源于stack exchange，提问作者Anas Apples