Losowe załadowanie pliku ze stylem

pytanie zadane 4 maja 2020 w JavaScript przez MKolaj15 Bywalec (2,270 p.)
edycja 4 maja 2020 przez MKolaj15

Witam, czy ktoś pomógłby mi napisać kod w javascript, który po załadowaniu strony spowoduje losowe dołączenie jednego z 3 plików .css?

Liczę na pomoc jak najprostszym sposobem, ponieważ nie jestem zbyt zaawansowany.

1 odpowiedź

odpowiedź 4 maja 2020 przez Tpk Nałogowiec (40,100 p.)
wybrane 4 maja 2020 przez MKolaj15

Najlepsza

<!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 :)