Javascript 如何使下划线在每次加载页面时改变颜色？

我想在每次加载页面时，我文本下的下划线都会随机改变颜色

我以前成功地使用过此脚本：

<script type="text/javascript">
    var classes = ['red', 'blue', 'yellow'];
    var random_class = classes[Math.floor(Math.random() * classes.length)];
    var title = document.getElementById('decor');
    classes.forEach((el) => {
    title.classList.remove(el);
    });
    title.classList.add(random_class);
</script>

但我不能（这里是新手）用我当前的代码来装配它（见下面的代码片段）

正文{
背景色：#FFFFFF；
边际：0px；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}
.集装箱{
显示：块；
宽度：85%；
/*垂直和水平居中*/
位置：绝对；顶部：50%；左侧：50%；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
a、 a:参观，a:停留{
-ms文本最后对齐：对齐；
-moz文本最后对齐：对齐；
文本最后对齐：对齐；
文字装饰：无；
颜色：#000000；
}    
#测试1{
显示：内联块；
高度：自动；
宽度：自动；
能见度：可见；
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
文本对齐：居中；
线高：7.5vw；
保证金：0；
字体大小：7.7vw；
字体大小：粗体；
位置：相对位置；
}
#测试1：之前{
内容：“；
盒影：插图0-1.3vw 0 0#00f9ff；
位置：绝对位置；
宽度：100%；
身高：100%；
变换：scaleX（0）；
变换原点：左；
动画名称：stretchRight；
动画持续时间：0.8s；
动画填充模式：正向；
动画计时功能：放松；
z指数：-1；
}
@关键帧stretchRight{
0% {
变换：scaleX（0）；
}
100% {
变换：scaleX（1）；
}
}

---

您可以将

.red、.yellow、.blue等..

类添加到您的

css

中，并让javascript从这些类中选择一个并将其动态添加到

test1

。由于可供选择的颜色数量很少，因此颜色可能会经常重复。如果要确保颜色不同，可能需要使用cookie来存储then值

函数GetRandomInInclusive（最小值、最大值）{ min=数学单元（min）； 最大值=数学楼层（最大值）； 返回Math.floor（Math.random（）*（max-min+1））+min； } 变量类=[‘红色’、‘蓝色’、‘黄色’、‘绿色’、‘青色’、‘品红’、‘橙色’、‘黑色’]； var random_index=GetRandomInInclusive（0，classes.length-1）； var title=document.getElementById（'test1'）； var random_class=类别[随机指数]； title.classList.add（随机类）

正文{
背景色：#FFFFFF；
边际：0px；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}
.集装箱{
显示：块；
宽度：85%；
/*垂直和水平居中*/
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
A.
答:访问,，
a:悬停{
-ms文本最后对齐：对齐；
-moz文本最后对齐：对齐；
文本最后对齐：对齐；
文字装饰：无；
颜色：#000000；
}
#测试1{
显示：内联块；
高度：自动；
宽度：自动；
能见度：可见；
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
文本对齐：居中；
线高：7.5vw；
保证金：0；
字体大小：7.7vw；
字体大小：粗体；
位置：相对位置；
}
#测试1：之前{
内容：“；
盒影：插图0-1.3vw 0 0#00f9ff；
位置：绝对位置；
宽度：100%；
身高：100%；
变换：scaleX（0）；
变换原点：左；
动画名称：stretchRight；
动画持续时间：0.8s；
动画填充模式：正向；
动画计时功能：放松；
z指数：-1；
}
瑞德：以前{
方框阴影：插图0-1.3vw 0 0红色！重要；
}
黄：以前{
方框阴影：插图0-1.3vw 0 0黄色！重要；
}
蓝：以前{
方框阴影：插图0-1.3vw 0 0蓝色！重要；
}
格林：以前{
方框阴影：插图0-1.3vw 0 0绿色！重要；
}
青青：以前{
方框阴影：插图0-1.3vw 0 0青色！重要；
}
洋红：以前{
盒影：镶嵌0-1.3vw 0 0品红！重要；
}
橙色：以前{
方框阴影：嵌入0-1.3vw 0 0橙色！重要；
}
布莱克：以前{
盒影：插图0-1.3vw 0 0黑色！重要；
}
@关键帧stretchRight{
0% {
变换：scaleX（0）；
}
100% {
变换：scaleX（1）；
}
}

使用cookies。如果cookie的值为某种颜色（例如，红色），则显示红色并将该值更改为另一种颜色（例如：蓝色），依此类推。请参阅有关MDN的详细信息：这类工作，但当颜色更改时，它不会显示动画。上面的代码给出了未捕获的TypeError:无法读取的属性“classList”null@3p3ch3这是因为您将代码放在页面顶部，对吗？要解决这个问题，您需要将代码放在页面的末尾，或者在加载窗口后调用它。如果您将代码放在页面的开头，它将尝试查找

test1

并失败，因为

test1

尚未加载。使用

函数getrandominintinclusive（min，max）{min=Math.ceil（min）；max=Math.floor（max）；返回Math.floor（Math.random（）*（max-min+1））+min；}document.addEventListener修复此问题(“DOMContentLoaded”，函数（事件）{var classes=['red'，'blue'，yellow'，'green'，'cyan'，'magenta'，'orange'，'black']；var random_index=getrandomintininclusive（0，classes.length）；var title=document.getElementById（'test1'）；var random_class=classes[random_index]；title.classList.add（random_class）；}）

@redongreen你完全正确……我想不出一个简单的方法来重新加载我头顶上的动画。我以后还要继续，希望有人能在那之前回答。

.red {
box-shadow: inset 0 -1.3vw 0 0 ##FF0000;
}

.yellow {
box-shadow: inset 0 -1.3vw 0 0 #FFFF00;
}

.blue {
box-shadow: inset 0 -1.3vw 0 0 #0000FF;
}