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属性，并且只应用列表中的最后一个渐变。

对于大多数其他属性，供应商之间的属性名称不同，但linear-gradient的情况不同，它们都是background。

现在，我知道我可以在元素中添加一个类名，并将style节点附加到document.head（这就是我现在正在做的事情），但它＆＃39;非常hackish，我想要一个更好的DOM做事方式。

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

Answer 1

假设您不想go through a library，那么简单的方法就是检测浏览器然后执行：

el.style.background = browserPrefix + gradient;

一般来说，无前缀的库也可以标准化其他一些渐变的东西，所以我热烈推荐它。

如何使用vanilla JavaScript将供应商前缀渐变添加到元素？

1 个答案: