javascript - 单击按钮更改网站链接颜色
问题描述
我创建了一个线性渐变并在 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>
解决方案
您需要在changeFont
单击按钮时调用。您还需要 forchangeFont
遍历所有a
s 并设置它们的style.color
属性。
虽然您可以这样做,但 IMO 非常难以阅读,因为颜色太相似了:
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>
推荐阅读
- coq - 为什么 Coq 在将参数应用于可强制项时不能推断出我的强制?
- api - 如何超越 OpenSea Api 的限制?
- r - 如何使函数返回两列不同类型(R)?
- r - 获取具有可变每日读数的时间序列数据中的所有可能组合
- sql - Query to replace last occurrence in postgres 8.3
- php - 仅将由相同特定符号包围的值包含到 php 数组中
- reactjs - 如何使用 axios get 请求发送带有标头的正文数据
- javascript - 有没有更好的方法来循环遍历这样的字符串数组?
- node.js - 无法从 getEvents API 访问时序见解冷库
- firebase - Flutter [firebase_auth] onAuthStateChanged 停止监听