javascript - 如何使用 vanilla JavaScript 将 vendor 前缀渐变添加到元素？-6ren

javascript - 如何使用 vanilla JavaScript 将 vendor 前缀渐变添加到元素？

转载作者：太空狗更新时间：2023-10-29 16:35:47

<分区>

我想以编程方式向元素添加渐变背景。

使用适当的 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)

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

对于大多数其他属性， vendor 之间的属性名称不同，例如 linear-gradient 但是，它们都是 background。

现在，我知道我可以向元素添加一个类名并将一个 style 节点附加到 document.head (这就是我现在正在做的) ，但它很老套，我想要一种更好的 DOM 做事方式。

简而言之，如何使用原生 JavaScript 将 vendor 前缀渐变添加到 DOM 元素？

文章推荐： javascript - 在 IE5 中将项目添加到

首页

博学

6Ren·AI

商城

javascript - 如何使用 vanilla JavaScript 将 vendor 前缀渐变添加到元素？