如何使用纯JavaScript向元素添加供应商前缀渐变？

Question

我希望能够通过编程方式为一个元素添加渐变背景。

使用适当的CSS，代码如下：

background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); /* W3C */

现在，我想使用JavaScript来实现这个。所以，我构想了以下的代码：

gradientList.forEach(gradient => el.style.background = gradient)

然而这样行不通。每次都会覆盖背景属性，只应用列表中的最后一个渐变。

对于大多数其他属性，厂商之间的属性名称不同，但在线性渐变的情况下，它们都是“background”。

现在，我知道我可以只需向元素添加类名并将“style”节点附加到“document.head”（这是我现在正在做的），但这种方法相当不正规，我想要更好的 DOM 方法。

简而言之，如何使用纯 JavaScript 将供应商前缀的渐变添加到 DOM 元素？

- Madara's Ghost

---

脑海中，我会直接通过一个类来处理。 - Florian Margaine

我也会通过一个类来进行操作。否则，你就必须循环遍历所有的DOM对象，只为了检查它们是否有背景，然后添加前缀。你可以通过一个类来选择它，但是这样你也可以将前缀添加到类中。 - ndugger

我正要发布这个，但它被标记为重复了 :) 浏览器前缀识别脚本来自Lea Verou的网站。 - Harry

或者您可以通过style属性在行内设置样式，例如这个bin。我通过回答这里的另一个问题来添加更多解释。 - Aurelio

@Nobita 那绝对可行。我认为这是目前最好的方法。 - Madara's Ghost

Answer 1

假设您不想通过图书馆，简单的方法是检测浏览器，然后执行以下操作：

el.style.background = browserPrefix + gradient;

一般来说，无前缀库还会对渐变的其他内容进行规范化处理，因此我强烈推荐使用它。

- Benjamin Gruenbaum

---

浏览器检测也是一种方法，但如果可能的话，我想尽量避免它。在我看来，这仍然比添加style节点更好的选择。使用JavaScript注入的样式，是否适用于无前缀？ - Madara's Ghost

David Welsh在这里有一篇关于快速粗糙地完成它的文章：http://davidwalsh.name/vendor-prefix - Benjamin Gruenbaum

@MadaraUchiha 是的 - prefix-free 可以选择进行这样的操作 - 请查看文档。 - Benjamin Gruenbaum