单选「单颜色」时背景无变化，双颜色渐变正常的问题求助

AI 小北

2026-6-24

问题：单选按钮控制背景纯色/渐变失效

问题详情

前端代码包含两个单选按钮（#radio1「单颜色」、#radio2「双颜色」）、颜色滑块和旋转滑块，通过chgrad()函数控制#wrapper的背景样式
异常现象：激活#radio1时，调整#range_color1滑块，#wrapper始终显示黑色无变化；激活#radio2时，双色渐变背景可正常生成
需求目标：#radio1激活时#wrapper显示纯色背景，#radio2激活时显示双色渐变背景
已尝试无效方案：给.wrapper设置background-image: none、单独创建渐变字符串

解决方案

核心是在chgrad()函数里根据单选按钮的选中状态，区分设置不同的背景属性：

1. 修正`chgrad()`函数逻辑

function chgrad() {
  const wrapper = document.getElementById('wrapper');
  const color1 = document.getElementById('range_color1').value;
  const color2 = document.getElementById('range_color2').value;
  const rotate = document.getElementById('range_rotate').value;
  const isSingleColor = document.getElementById('radio1').checked;

  if (isSingleColor) {
    // 单颜色模式：设置纯色背景，清空渐变
    wrapper.style.backgroundColor = color1;
    wrapper.style.backgroundImage = 'none';
  } else {
    // 双颜色模式：生成渐变背景，清空纯色
    const gradientStr = `linear-gradient(${rotate}deg, ${color1}, ${color2})`;
    wrapper.style.backgroundImage = gradientStr;
    wrapper.style.backgroundColor = 'transparent';
  }
}

2. 确保事件绑定正确

给所有交互控件绑定chgrad()触发事件，比如：

<input type="radio" name="colorMode" id="radio1" onchange="chgrad()">
<input type="radio" name="colorMode" id="radio2" onchange="chgrad()">
<input type="range" id="range_color1" oninput="chgrad()">
<input type="range" id="range_color2" oninput="chgrad()">
<input type="range" id="range_rotate" oninput="chgrad()">