javascript - 单击按钮更改网站链接颜色

Question

我创建了一个线性渐变并在 javascript 中对其进行动画处理，并将其设置为我网站的背景。然后我在 HTML 中添加了一个按钮，当单击该按钮时，渐变的颜色会关闭。

现在我试图让按钮也改变我页面上文本链接的颜色，但我似乎无法弄清楚。有人可以让我知道我哪里出错了吗？谢谢。

Java 脚本

var angle = 0, color = "#666", colors = "#000", font = "rgba(102, 102, 102, .3)";
var changeBackground = function() {
  angle = angle + .4
  document.body.style.backgroundImage = "linear-gradient(" + angle + 
"deg, " + colors + ", " + color + ", " + colors + ",  " + color + ",  " 
+ colors + ",  " + color + ", " + colors + ",  " + color + ", " + colors 
+ ",  " + color + ", " + colors + ", " + color;
  requestAnimationFrame(changeBackground)
}

var changeFont = function() {
  document.a.style.color = "color(" + font;
}

changeBackground()

document.querySelector('#myBtn').addEventListener('click', function () {
  color = (color != "#666") ? "#666" : "#fff";
  colors = (colors != "#000") ? "#000" : "#6839ba";
  font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" 
: "rgba(247, 201, 180, .3)";
})

HTML 按钮和链接

<main class="main">
    <button class="Btn" id="myBtn">Click</button>
    <ul class="position">
        <li class="fnup"><a href="#">fn-up   </a></li>
        <li class="about"><a href="#">about   </a></li>
        <li class="issue hover"><a href="#">issue 0 </a></li>
        <li class="contact hover"><a href="#">contact</a></li>
    </ul>
</main>

Answer 1

您需要在单击按钮时调用changeFont。您还需要 changeFont 遍历所有 a 并设置它们的 style.color 属性。

虽然您可以做到这一点，但在我看来，这是非常难读的，因为颜色太相似了:

var angle = 0, color = "#666", colors = "#000", font = "rgba(102, 102, 102, .3)";
var changeBackground = function() {
  angle = angle + .4
  document.body.style.backgroundImage = "linear-gradient(" + angle + 
"deg, " + colors + ", " + color + ", " + colors + ",  " + color + ",  " 
+ colors + ",  " + color + ", " + colors + ",  " + color + ", " + colors 
+ ",  " + color + ", " + colors + ", " + color;
  requestAnimationFrame(changeBackground)
}

var changeFont = function() {
  document.querySelectorAll('a').forEach(a => a.style.color = font);
}

changeBackground();
changeFont();

document.querySelector('#myBtn').addEventListener('click', function () {
  color = (color != "#666") ? "#666" : "#fff";
  colors = (colors != "#000") ? "#000" : "#6839ba";
  font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" 
: "rgba(247, 201, 180, .3)";
  changeFont();
})

<main class="main">
  <button class="Btn" id="myBtn">Click</button>
  <ul class="position">
    <li class="fnup"><a href="#">fn-up   </a></li>
    <li class="about"><a href="#">about   </a></li>
    <li class="issue hover"><a href="#">issue 0 </a></li>
    <li class="contact hover"><a href="#">contact</a></li>
</main>