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

Question

我正在开发一个为用户分配不同颜色文本的应用程序（想想类似 Gravatar 的散列生成的用户颜色）[即HashColors - 可能需要单击 "Run with JS"]。

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

https://jsbin.com/sudave/9/edit?html,console,output 提供了一个完整示例（可能需要单击 "Run with 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属性returns一个对象，每个样式都有一个属性；不是字符串。

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

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

Browser inconsistency when using JavaScript to generate JavaScript to generate inline style

javascript

css

firefox

google-chrome

cross-browser