时间戳

首页 > 解决方案 > 使用 JavaScript 和自定义变量动态更改按钮的 CSS

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

问题描述

我有一个从.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 % )'

然后我想将此“颜色”变量应用于背景图像，以便按钮具有不同的渐变颜色。

我尝试了两种不同的方法，一种使用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

标签： javascriptjqueryhtmlcss

解决方案

更新：

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

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 框输入各自的代码。

推荐阅读