ein Skript innerhalb CSS

Question

Integration

Derzeit auf dem eigenen Stylesheet habe ich folgendes:

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

Dies schafft eine gefälschte individuelle unterstrichen.

Ich möchte, dass jedes Mal, wenn die Seite geladen oder aktualisiert wird, die Farbe des Rahmens in eine zufällige Farbe geändert wird, die im Array angegeben ist.

fand ich dieses Skript hier vor einer Weile:

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

Wie gehe ich davon, den richtigen Weg zu tun?

Answer 1

In Ihrem Beispiel verwenden Sie Javascript, um die Textfarbe jedes Mal festzulegen, wenn das Skript ausgeführt wird. Sie können es einfach ändern, um stattdessen den Boxshadow zu setzen.

Hinweis: css-Eigenschaften mit einem Bindestrich (-) in werden in camelCase konvertiert; box-shadow wird 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

Sie könnten nur eine Zufall Klasse das Element hinzufügen, mit den zugehörigen Klassen mit verschiedenen Farben:

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

Und deine 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

Ich würde Stile auf diese Weise nicht verwenden. Ich würde Klassen in der CSS-Datei vordefinieren und diese Klassen Elementen zuweisen.