在CSS中集成脚本 [英] Integrating a script within CSS

问题描述

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

Currently on my style sheet I have the following:

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

这会创建一个虚假的自定义下划线。

This creates a fake custom underline.

我想要它，以便每次加载或刷新页面时，边框的颜色变为数组中指定的随机颜色。

I want it so that every time the page is loaded or refreshed the color of the border changes to a random color specified in the array.

我不久前在这里找到了这个脚本：

I found this script here a little while ago:

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

我该如何正确地做这件事？

How do I go about doing this the right way?

推荐答案

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

You could just add a random class to the element, with the classes associated with different colors:

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

这篇关于在CSS中集成脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！