jQuery .css()方法结合变量失效求助：动态更新CSS属性异常

嘿，我来帮你排查这个问题！你遇到的情况其实是JavaScript对象字面量的一个常见坑，结合你的代码片段来看，核心问题出在.css()方法的调用方式上。

问题根源 #

jQuery的.css()方法有两种调用形式，但如果用变量作为CSS属性名时，不能直接用普通的对象字面量写法。举个例子，如果你在函数里写了类似这样的代码：

$(elementClass).css({ pCssProperty: inputValue });

这里的pCssProperty会被JavaScript当作字符串字面量来处理，也就是说，jQuery会尝试给元素设置一个叫pCssProperty的CSS属性，而不是你传入的background-color——这显然不是你想要的结果，所以样式不会更新。

另外，你的代码里inputValue = $(inputNa...是未完成的，要记得补全成$(inputName).val()来获取输入框的实际值，这也是可能影响功能的小细节。

两种可行的解决方案 #

方案1：使用双参数版的.css()（最稳妥）

这是最简单直接的方式，直接把CSS属性变量作为第一个参数传入，值作为第二个参数：

$(document).ready(function() {
  $('input').blur(function() {
    var inputName = $(this).attr("name");
    updateCSS(inputName, 'button-style-one', 'background-color');
  })

  // 更新CSS的函数
  function updateCSS(pInputNameAttribute, pElementClass, pCssProperty) {
    var inputName = '[name=' + pInputNameAttribute + ']',
        elementClass = '.' + pElementClass,
        inputValue = $(inputName).val(); // 补全获取输入值的代码
    
    // 双参数形式直接传入变量
    $(elementClass).css(pCssProperty, inputValue);
  }
})

方案2：使用ES6计算属性名（适合现代环境）

如果你想用对象形式来设置多个样式（现在你只设置一个，但未来可能扩展），可以用ES6的计算属性名语法，用方括号包裹变量，让JavaScript解析变量的值作为属性名：

$(document).ready(function() {
  $('input').blur(function() {
    var inputName = $(this).attr("name");
    updateCSS(inputName, 'button-style-one', 'background-color');
  })

  // 更新CSS的函数
  function updateCSS(pInputNameAttribute, pElementClass, pCssProperty) {
    var inputName = '[name=' + pInputNameAttribute + ']',
        elementClass = '.' + pElementClass,
        inputValue = $(inputName).val();
    
    // 计算属性名解析变量
    $(elementClass).css({
      [pCssProperty]: inputValue
    });
  }
})

这样修改后，你的函数就能正确识别传入的CSS属性变量，实现根据输入值更新元素样式的功能啦。

内容的提问来源于stack exchange，提问作者m-use