如何创建全局样式修改函数？解决参数传递与未定义错误

嘿，我来帮你搞定这个报错问题！你遇到的Uncaught ReferenceError: backgroundColor is not defined，本质是在HTML内联事件里直接写了未定义的标识符——你把backgroundColor当成变量传了，但这个变量根本没被声明，浏览器自然找不到它。下面我给你一步步拆解解决方案：

1. 先写一个灵活的全局样式修改函数 #

我们可以把全局函数设计成支持单个样式修改和批量样式修改两种模式，这样适配更多场景：

// 全局样式修改函数
function changeElementStyle(selector, styles) {
  // 先找到目标元素
  const targetElement = document.querySelector(selector);
  if (!targetElement) {
    console.warn(`找不到选择器为 ${selector} 的元素`);
    return;
  }

  // 情况1：批量修改（传入样式对象）
  if (typeof styles === 'object' && styles !== null) {
    Object.assign(targetElement.style, styles);
  } 
  // 情况2：单个样式修改（传入属性名+属性值）
  else if (typeof styles === 'string' && arguments.length === 3) {
    const propName = styles;
    const propValue = arguments[2];
    targetElement.style[propName] = propValue;
  }
}

2. HTML onchange事件的正确传参方式 #

核心要记住：样式属性名必须以字符串形式传递（用单/双引号包裹），不能直接写标识符。

示例1：单个样式修改（比如背景色） #

当下拉框变化时，修改目标元素的背景色：

<!-- 下拉选择器 -->
<select onchange="changeElementStyle('#myBox', 'backgroundColor', this.value)">
  <option value="#ff0000">红色</option>
  <option value="#00ff00">绿色</option>
  <option value="#0000ff">蓝色</option>
</select>

<!-- 目标元素 -->
<div id="myBox" style="width: 150px; height: 150px; border: 1px solid #333;"></div>

示例2：批量修改多个样式 #

比如点击按钮时，同时修改元素的背景色、文字颜色和字号：

<button onclick="changeElementStyle('#myBox', {
  backgroundColor: 'pink',
  color: 'white',
  fontSize: '18px',
  padding: '10px'
})">批量修改样式</button>

3. 为什么之前会报错？ #

你大概率是这样写的：

<!-- 错误写法！backgroundColor没加引号，被当成变量 -->
<select onchange="changeElementStyle('#myBox', backgroundColor, this.value)">

这里的backgroundColor没有引号，浏览器会把它当作一个变量去查找，但你根本没定义过这个变量，所以直接抛出了ReferenceError。只要给它加上引号变成字符串'backgroundColor'，问题就解决了。

4. 更推荐的写法：用事件监听代替内联onchange #

内联事件虽然简单，但不利于代码维护，推荐用JS绑定事件监听：

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const colorSelect = document.querySelector('#colorSelect');
  colorSelect.addEventListener('change', function(e) {
    changeElementStyle('#myBox', 'backgroundColor', e.target.value);
  });
});

对应的HTML只需要给元素加个ID：

<select id="colorSelect">
  <option value="#ff0000">红色</option>
  <option value="#00ff00">绿色</option>
  <option value="#0000ff">蓝色</option>
</select>

这样代码分离，后期修改起来更方便，也避免了内联事件的一些潜在问题。

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