我可以使用 JavaScript 将 css 中的现有颜色复制到渐变背景吗？答案

【问题标题】：Can I use JavaScript to copy an existing colour in css to a gradient background?我可以使用 JavaScript 将 css 中的现有颜色复制到渐变背景吗？
【发布时间】：2019-12-10 02:42:24
【问题描述】：

我在一家提供管理软件的公司工作，在后端，您可以配置配色方案以使其创建的页面更适合品牌和图像。

按钮应用了渐变，由浅色和深色组成，按钮 CSS 如下。

.btn-default {
   linear-gradient(to bottom,#9c8400 0%,#5f5000 100%)
}

我想要做的是采用上面的渐变并保持较浅的颜色相同但将较深的颜色更改为白色，较浅的颜色始终是渐变中的第一个颜色，然后将生成的渐变应用于身体.

   linear-gradient(to bottom,#ffffff 0%,#9c8400 100%);

之前的回复提供了一个几乎可以工作的答案，但我需要翻转颜色（浅色和深色需要处于彼此的位置）并将较暗的颜色更改为白色。

const buttonStyle = window.getComputedStyle(button);
console.log(buttonStyle.backgroundImage);

document.body.style.backgroundImage = buttonStyle.backgroundImage;

【问题讨论】：

查看这个答案。可能有用：stackoverflow.com/questions/15071062/…
Using JavaScript to edit CSS gradient的可能重复
嘿利亚姆。不幸的是，“我不希望你们写一个直接的答案，我只是想要一些指针” 不是 StackOverflow 的用途。这个问题太宽泛了，因此无法充分回答；我们如何确定指针集合是“正确”还是“不正确”？请编辑您的帖子以提出直接的具体问题，并包括您解决问题的尝试。

标签： javascript css

【解决方案1】：

您可以获取按钮的样式并像这样重新应用它：

const button = document.querySelector('.btn-default');
const buttonStyle = window.getComputedStyle(button);
console.log(buttonStyle.backgroundImage);

document.body.style.backgroundImage = buttonStyle.backgroundImage;

.btn-default {
   background: linear-gradient(to bottom,#9c8400 0%,#5f5000 100%)
}

&lt;button class="btn-default"&gt;Hello&lt;/button&gt;

如果你需要，你可以解析buttonStyle.backgroundImage来提取第一个颜色，然后应用到任何你想要的地方！

【讨论】：

【解决方案2】：

我认为你应该处理这个问题的方法是让你的css属性来自JS，值#9c8400来自一个变量，然后你将它应用到你的DOM上。每次您想更新样式时，您只需更改变量的内容并将自定义 CSS 重新应用到您的 DOM 元素

希望这对你有所帮助，我尽量不要像你问的那样直接写答案：p

【讨论】：