动态更新线性渐变CSS

Question

如何使用javascript/Jquery动态改变linear-gradient的参数值？我必须根据用户选择和范围滑块值分别更改颜色及其百分比。我写了下面的代码，但它不工作。由于我们必须将线性渐变放在 " " 中，并且由于双引号，所有参数都变成了简单的字符串。

var gradColor1 = `${this.color1} ${percentage}%`;
var gradColor1 = `${this.color1} ${percentage}%`;
slider.style.background =linear-gradient(to left, gradColor1, gradColor1);

Answer 1

问题是因为您需要将中的值连接到您设置为 style.backgroud 值的字符串中。由于您已经在使用模板文字，请尝试以下操作：

slider.style.background = `linear-gradient(to left, ${gradColor1}, ${gradColor1})`

请注意，如果要指定渐变，则需要两种颜色，如下所示：

var percentage1 = 50;
var color1 = "#C00";
var percentage2 = 100;
var color2 = "#000";

slider.style.background = `linear-gradient(to left, ${color1} ${percentage1}%, ${color2} ${percentage2}%)`;

#slider {
  width: 200px;
  height: 200px;
}

<div id="slider"></div>

最后，请注意，除非您在 JS 中动态计算颜色，否则最好只使用 CSS 设置背景，如下所示：

#slider {
  width: 200px;
  height: 200px;
  background: linear-gradient(to left, #C00 50%, #000 100%);
}

<div id="slider"></div>

Answer 2

这是我使用 javascript 的代码片段，您可以在其中 select OriginalColor 并使相同颜色的阴影变暗或变亮（以防原始颜色出现来自 json 例如）。通过修改下面的代码笔，您可以添加逻辑来更改褪色开始的百分比、变亮或变暗、原始颜色和自动计算的第二种颜色（如果您想让它完全动态和程序化）。它比你要求的多一点，但我希望有人觉得它有用，因为它是我在项目期间提出的要求。

codepen: Dynamic linear color depending on original color

<!DOCTYPE html>
    <html>
    <head>
      <title>Dynamic linear color depending on original color</title>
    </head>
    <body>
    <h1>Linear Gradient - Left to Right </h1>
    <p>This linear gradient starts ModifiedColor  at the left, transitioning to OriginalColor at the Right in 55% proportion:</p>
    
    </body>
    </html>

JS:

function ModColor(color, adjustBy) {
        return '#' + color.replace(/^#/, '').replace(/../g, color => ('0'+Math.min(255, Math.max(0, parseInt(color, 16) + adjustBy)).toString(16)).substr(-2));
    }
    
var OriginalColor="#ad112b";
//this is fade itno color and ModifiedColor is starting color but it can be reverted in calculation below  
var ModifiedColor=ModColor(OriginalColor,-40);
//replace -40 to 40 to switch darken to lighten or change value -80 to get more shadow etc... 
    
document.body.style.backgroundImage = 'linear-gradient(to right,'+ModifiedColor+' 55%,'+OriginalColor+')'; 
//55% is where is going to start fading into OriginalColor so left side is ModifiedColor but can be reverted if needed differently

动态更新线性渐变CSS

Dynamically update Linear Gradient CSS

html

javascript

css

jquery

linear-gradients