Javascript 在CSS中集成脚本

目前在我的样式表中，我有以下内容：

a {
box-shadow: inset 0 -1.3vw 0 0 #AFFFFF;
}

这将创建一个假自定义下划线

我希望这样，每次加载或刷新页面时，边框的颜色都会更改为数组中指定的随机颜色

我不久前在这里发现了这个脚本：

var colors = ['#ff0000', '#00ff00', '#0000ff'];
var random_color = colors[Math.floor(Math.random() * colors.length)];
document.getElementById('title').style.color = random_color;

---

如何以正确的方式执行此操作？

在您的示例中，每次执行脚本时都使用javascript设置文本颜色。您只需将其更改为每次设置boxshadow即可

注意：中带有连字符（-）的css属性转换为camelCase<代码>框阴影变为

框阴影

var colors=['ff0000'、'00ff00'、'0000ff']；
var random_color=colors[Math.floor（Math.random（）*colors.length）]；
document.getElementById（'title'）.style.boxShadow=“inset 0-1.3vw 0”+随机颜色
a{
盒影：插图0-1.3vw 0 0#affff；
}
test
在您的示例中，每次执行脚本时都使用javascript设置文本颜色。您只需将其更改为每次设置boxshadow即可

注意：中带有连字符（-）的css属性转换为camelCase<代码>框阴影

变为

框阴影

var colors=['ff0000'、'00ff00'、'0000ff']；
var random_color=colors[Math.floor（Math.random（）*colors.length）]；
document.getElementById（'title'）.style.boxShadow=“inset 0-1.3vw 0”+随机颜色
a{
盒影：插图0-1.3vw 0 0#affff；
}
test
您只需将一个随机类添加到元素中，该类与不同的颜色关联：

CSS:

还有你的JS：

var classes = ['red', 'blue', 'yellow'];
var random_class = classes[Math.floor(Math.random() * classes.length)];
var title = document.getElementById('title');
classes.forEach((el) => {
   title.classList.remove(el);
});
title.classList.add(random_class);

您只需将一个随机类添加到元素中，该类与不同的颜色关联：

CSS:

还有你的JS：

var classes = ['red', 'blue', 'yellow'];
var random_class = classes[Math.floor(Math.random() * classes.length)];
var title = document.getElementById('title');
classes.forEach((el) => {
   title.classList.remove(el);
});
title.classList.add(random_class);

我不会这样使用样式。我会在CSS文件中预定义类并将这些类分配给元素。
我不会以这种方式使用样式。我会在CSS文件中预定义类，并将这些类分配给元素