如何在jQuery的css()函数中使用变量作为CSS属性名？

API 探路者

2026-5-29

解决jQuery插件中css()方法使用变量作为属性名的问题

嘿，我一眼就看出你代码里的问题啦——在JavaScript对象字面量里，直接写cssSelect: color的话，这个键会被当成字符串"cssSelect"，而不是你传入的变量值。这就是为什么css()方法没法正确识别你要设置的CSS属性。

两种可行的解决办法：

1. ES5及更早版本写法（兼容性好）

先创建一个空对象，再通过方括号语法把变量作为属性名赋值：

$.fn.randomColor = function(cssSelect) {
  // 先实现rand函数，或者直接用Math.random计算
  function rand(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  
  var color = 'RGB(' + rand(0, 255) + ',' + rand(0, 255) + ',' + rand(0, 255) + ')';
  var cssObj = {};
  cssObj[cssSelect] = color; // 这里用方括号把变量作为属性名
  $(this).css(cssObj);
  return this;
};

2. ES6及以上版本写法（更简洁）

用ES6的计算属性名语法，直接在对象字面量里用方括号包裹变量：

$.fn.randomColor = function(cssSelect) {
  const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
  const color = `RGB(${rand(0, 255)},${rand(0, 255)},${rand(0, 255)})`;
  $(this).css({
    [cssSelect]: color // 计算属性名，直接用变量当键
  });
  return this;
};