Question

如何使用javascript / Jquery动态更改线性渐变的参数值？我必须分别根据用户选择和范围滑块值更改颜色和百分比。我写了下面的代码，但它没有用。因为我们必须将线性渐变放入＆＃34; ＆＃34;由于双引号，所有参数都变成简单的字符串。

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})`

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

＆＃13;

var percentage1 = 50;
var color1 = "#C00";
var percentage2 = 100;
var color2 = "#000";

slider.style.background = `linear-gradient(to left, ${color1} ${percentage1}%, ${color2} ${percentage2}%)`;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

2 个答案: