从JSON更新元素CSS

Question

我正在尝试在更新元素的CSS之前创建JSON对象，但CSS没有为元素更新。

我的代码：

var style = $.parseJSON("{\""  + attrName +  "\":\""  + $(this).val() +  "\"}");                                
elContainer.css(style);

Answer 1

为什么要创建一个JSON字符串然后解析它，而不仅仅是创建一个JS对象？

这是你应该做的，除非我误解：

var style = {};
style[attrName] = $(this).val();
eleContainer.css(style);

或者，如果你真的只是设置一个CSS属性，你可以像@Nick建议那样做，如下：

eleContainer.css(attrName, $(this).val());

顺便说一下，如果这是你的实际代码，你可能会因为错过+连接器而收到错误。

---

<强>更新

.css()是匹配元素集的一次性设置。它不会创建适用于尚不存在的元素的永久CSS规则。

如果您想实际创建CSS规则而不是将某些CSS样式应用于一组特定元素，那么您可以动态创建<style>标记：

$("<style> .container { "+ attrName +": '"+ $(this).val() +"'; } </style>")
    .appendTo('body');

另请参阅：Create a CSS rule / class with jQuery at runtime

Answer 2

您可以设置单个CSS属性，而无需创建对象，当然也无需解析JSON：

eleContainer.css(attrName, $(this).val());