使用 JavaScript 和自定义变量动态更改按钮的 CSS

Question

我有一个从 .btn-1 获取样式的按钮。：

<a id="button1" class="btn btn-1">Hover me</a><br>

在脚本中，我有三个变量，将它们组合在一个字符串中以在按钮上创建渐变颜色：

var color1 = "#fdceaa";
var color2 = "#FFFFFF";
var color3 = "#FFFFFF";
var color = 'linear - gradient(to right, ' + color1 + ' 0 % , ' + color2 + ' 51 % ,' + color3 + ' 100 % )'

然后我想把这个“color”variable应用到背景图片，让按钮有不同的渐变色。

我尝试了两种不同的方法，一种使用 document.querySelector，另一种使用 jQuery $('.btn.btn-1').css，但都没有工作（它没有改变按钮的颜色）：

document.querySelector('.btn.btn-1')['background-image'] = color;
$('.btn.btn-1').css('background-image', color);

控制台没有错误...

完整代码：

<style>
      body {
        font-family: 'Montserrat', sans-serif;
        margin: 0;
      }

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    height: 100%;
  }

  .btn {
    flex: 1 1 auto;
    margin: 10;
    padding: 20px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 1000px;
  }

  .btn:hover {
    background-position: right center;
  }

  .btn-1 {
    background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
  }
</style>

<body>
  <div class="container">
    <a id="button1" class="btn btn-1">Hover me</a><br>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
      var color1 = "#fdceaa";
      var color2 = "#FFFFFF";
      var color3 = "#FFFFFF";
      var color = 'linear - gradient(to right, ' + color1 + ' 0 % , ' + color2 + ' 51 % ,' + color3 + ' 100 % )'
      document.querySelector('.btn.btn-1')['background-image'] = color;
      $('.btn.btn-1').css('background-image', "red");
    </script>
  </div>
</body>

https://codepen.io/anon/pen/VgRxoK?editors=1010

Answer 1

更新：

另一个答案实际上是正确的，实际问题是% 符号之前的空格。当我手动移动代码时，我清理了它：

var color = 'linear-gradient(to right, ' + color1 + ' 0 % , ' + color2 + ' 51 % ,' + color3 + ' 100 % )';

应该是：

var color = 'linear-gradient(to right, ' + color1 + ' 0% , ' + color2 + ' 51% ,' + color3 + ' 100% )';

这是 CodePen https://codepen.io/anon/pen/bzZmrm - 请注意，您可以使用 CSS 和 JS 框输入您各自的代码。

Answer 2

好的，首先：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  var color1 = "#fdceaa";

你不应该像这样组合脚本，你应该使用单独的标签：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var color1 = "#fdceaa";
// ...
</script>

其次，当您在脚本标签中添加代码时，该代码会在浏览器读取该脚本标签的那一刻（即，当它第一次加载页面时）运行。但是您不希望它在加载时执行某些操作，而是希望它在用户悬停时执行某些操作。

为此，您必须设置一个称为事件侦听器的东西（在加载时）。首先像以前一样设置颜色变量：

var color1 = "#fdceaa";
var color2 = "#FFFFFF";
var color3 = "#FFFFFF";
var color = 'linear - gradient(to right, ' + color1 + ' 0 % , ' + color2 + ' 51 % ,' + color3 + ' 100 % )'

然后，设置您的偶数侦听器，在本例中为“悬停”侦听器：

$('.btn.btn-1').hover(e => {
  // This code will be run when the user hovers over .btn.btn-1
  // Also note that this should be background-color, not background-image
  $('.btn.btn-1').css('background-color', "red");
  // You could also use $(e.target) or $(this) instead of $('.btn.btn-1')
});

现在，当有人将鼠标悬停在您的按钮上时，该代码将运行，您可以将动态值替换为硬编码的 red。

Answer 3

这行是罪魁祸首：

var color = 'linear - gradient(to right, ' + color1 + ' 0 % , ' + color2 + ' 51 % ,' + color3 + ' 100 % )';

如前所述，linear - gradient 之间不应有空格，而应为 linear-gradient。另一个问题是步骤的百分比中也有空格。 0 % 应该是 0%。

如果您删除空格，您将获得预期的结果。但是，为避免因使用连接运算符动态构建字符串而产生的问题，我邀请您查看template literals。

这是使用模板文字的相同语句。我个人觉得阅读起来不会那么混乱。

var color = `linear-gradient(to right, ${color1} 0%, ${color2} 51% , ${color3} 100%)`;

最后，除了使用函数来构建background-image 值之外，还有一个CodePen 应用了我所说的所有内容。希望它能给你一个前进的方向。