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属性转换为camelCase; 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>

Answer 2

您可以在元素中添加随机类，其中的类与不同的颜色相关联：

CSS：

a.red {
    box-shadow: inset 0 -1.3vw 0 0 red;
}
a.blue {
    box-shadow: inset 0 -1.3fw 0 0 blue;
}
a.yellow {
    box-shadow: inset 0 -1.3fw 0 0 yellow;
}

你的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);

Answer 3

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

在CSS中集成脚本

3 个答案: