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

Question

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

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

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

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

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

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

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

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

Answer 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%)
}

<button class="btn-default">Hello</button>

如果需要，您可以解析 buttonStyle.backgroundImage 以提取第一种颜色，然后将其应用到任何您想要的地方!