javascript - 在 CSS 中集成脚本

Question

目前在我的样式表上有以下内容:

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;

我该如何以正确的方式做到这一点？

Answer 1

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

注意:带有连字符(-)的css属性被转换为驼峰式； box-shadow 变成 boxShadow

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 0 "+random_color;

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

<a id="title">test</a>