jQuery .css（）函数不适用于变量[重复]

Posted 2023-03-16

【中文标题】jQuery .css（）函数不适用于变量[重复]

【英文标题】：jQuery .css() function not working with variable [duplicate]

【发布时间】：2018-09-05 05:35:35

【问题描述】：

我正在尝试创建一个基于用户输入更新 CSS 的函数，并且除了 CSS 属性参数外，它都可以正常工作。

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

  // Function to update CSS
  function updateCSS(pInputNameAttribute, pElementClass, pCssProperty) 
    var inputName = '[name=' + pInputNameAttribute + ']',
      elementClass = '.' + pElementClass,
      inputValue = $(inputName).val();

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="submit.php" method="post" id="buttonSettings">
  <input type="text" name="button_background_color" placeholder="Background Color">
</form>

<a href="#" class="button-style-one">Button</a>

如果我将pCssProperty: inputValue 替换为'background-color': inputValue，则此方法有效，但我需要CSS 属性作为函数的参数——我怎样才能让这个属性与变量一起工作？ JSFiddle：https://jsfiddle.net/frafgdnq/10/

【问题讨论】：

当你定义一个对象时，比如 jQuery 的.css() 方法作为参数的对象，你可以有不带引号的属性名。变量通常不会插入到冒号的左侧。因此，您的代码试图设置一个字面上命名为 pCssProperty 的 CSS 属性。

【参考方案1】：

您可以通过首先创建对象然后分配密钥来访问您的 css 对象的 pCssProperty 的内容：

var cssObj = ;
cssObj[pCssProperty] = inputValue;
$(elementClass).css(cssObj);

...或者使用这个 ES6 简写来做同样的事情：

$(elementClass).css([pCssProperty]: inputValue)

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

  // Function to update CSS
  function updateCSS(pInputNameAttribute, pElementClass, pCssProperty) 
    var inputName = '[name=' + pInputNameAttribute + ']',
      elementClass = '.' + pElementClass,
      inputValue = $(inputName).val();

    $(elementClass).css(
      [pCssProperty]: inputValue
    );
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="submit.php" method="post" id="buttonSettings">
  <input type="text" name="button_background_color" placeholder="Background Color">
</form>

<a href="#" class="button-style-one">Button</a>

【讨论】：

+1 我知道发生了什么，但我不知道您可以将变量放在方括号中以获取对象定义中的值。