提问人：Madara's Ghost 提问时间：6/15/2015 更新时间：6/15/2015 访问量：207
如何使用 vanilla JavaScript 将供应商前缀的渐变添加到元素中？[复制]
How to add vendor prefixed gradients to an element with vanilla JavaScript? [duplicate]
问：
我想以编程方式为元素添加渐变背景。
使用适当的 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 属性，并且仅应用列表中的最后一个渐变。
对于大多数其他属性，供应商之间的属性名称不同，但是，它们都是 .linear-gradientbackground
现在，我知道我可以向元素添加一个类名并附加一个节点（这就是我现在正在做的事情），但它非常黑客，我想要一种更好的 DOM 做事方式。styledocument.head
简而言之，如何使用 vanilla JavaScript 将供应商前缀渐变添加到 DOM 元素中？
答：
2赞
Benjamin Gruenbaum
6/15/2015
#1
假设您不想浏览库，那么简单的方法是检测浏览器，然后执行以下操作：
el.style.background = browserPrefix + gradient;
总的来说，无前缀的库还为渐变规范了一堆其他东西，所以我强烈推荐它。
评论
0赞
Madara's Ghost
6/15/2015
浏览器检测也是一种方法，但如果可能的话，我想避免它。仍然比添加节点 IMO 更好的选择。无前缀是否适用于注入 JavaScript 的样式？style
1赞
Benjamin Gruenbaum
6/15/2015
大卫·威尔士（David Welsh）在这里写了一篇关于快速和肮脏的文章：davidwalsh.name/vendor-prefix
0赞
Benjamin Gruenbaum
6/15/2015
@MadaraUchiha 是的 - prefix-free 可以选择这样做 - 检查文档。
评论
style