<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<script>
let mainElement = document.getElementsByTagName('link')[0];
let names = ['style1','style2','style3'];
let randomValue = getRandomIntInclusive(0, 2);
replaceLinkHref(`css/${names[randomValue]}.css`, mainElement)
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function replaceLinkHref(newValue, handler){
handler.setAttribute('href', newValue);
}
</script>
</body>
</html>
Wszystkie style trzymam w katalogu css są tam odpowiednio nazwane style1, style2, style3.
Te nazwy są też w zmiennej names powyżej, to co się więc dzieje to:
1. Losujemy liczbę z zakresu 0-2 (włącznie - czyli liczby 0,1,2)
2. Wylosowana wartość traktujemy jako indeks tablicy (indeksy tablicy z nazwami plików - indeksy są liczone od 0)
3.Uruchamiamy funkcje replaceLinkHref która dostaje całą ścieżkę (zbudowaną w międzyczasie) i zmienia href pobranego wcześniej elementu (który też dostaje w argumencie).
Ogólnie nie ma tu wiele skomplikowanego a jeżeli jest to max. funkcja getRandomIntInclusive, którą znajdziesz tutaj w przykładach (gotowiec). W razie czego pytaj :)