使用 JavaScript 生成 JavaScript 生成内联样式时浏览器不一致

Question

我正在开发一个应用程序，为用户分配不同颜色的文本（想想像 Gravatar 一样的哈希生成的用户颜色）[即HashColors - 可能需要点击“用 JS 运行”]。

为了将 HashColors 脚本集成到更大的应用程序中，我创建了一个函数，为每个用户的条目设置 .textContent 和 .style。 .textContent 似乎可以跨浏览器使用，但.style 似乎只能在 Firefox 中使用。

https://jsbin.com/sudave/9/edit?html,console,output 上提供了完整示例（可能需要单击“使用 JS 运行”），但我很确定我的问题的症结在于以下函数或我如何称呼它：

元素生成函数：

var gE = function(selector, value, style) {
    var element = document.querySelector("ul " + selector);
    element.textContent = value || " ";  // <-- works as expected
    element.style = style || "";  // <-- does NOT work as expected !!!
                                  // i.e. works as expected in FF
                                  // does NOT work as expected in Chrome or Safari
    return element;
};

示例元素生成函数调用：

 gE('.name', "White on Purple", "background: rgba(" + color + "); color: white");

在哪里var color = "100, 000, 100, 100";

谁能告诉我为什么这在 Firefox 中按预期工作，但在其他浏览器中却没有？更好的是，任何人都可以提出建议，以便我可以让它跨浏览器工作吗？

在 Firefox 中按预期工作：

在 Chrome 中无法正常工作：

Answer 1

Element.style 属性返回一个对象，每个样式都有一个属性；不是字符串。

您应该调用setAttribute("style", style) 来实际设置属性。