ユーザがページをリロードするたびにCSSファイルを変更することはできますか？

Question

私はここに4つのCSSファイルがあり、ユーザーがページを更新するたびにCSSファイルを変更したいと思っています。

<link href="assets/css/explorer-turquoise.css" rel="stylesheet" type="text/css"> 
 
    <link href="assets/css/explorer.css" rel="stylesheet" type="text/css"> 
 
    <link href="assets/css/explorer-red.css" rel="stylesheet" type="text/css"> 
 
    <link href="assets/css/explorer-blue.css" rel="stylesheet" type="text/css">

今すぐいつでも任意のボタンやリンクをクリックせずに私のウェブサイトに来るユーザーが動的にCSSファイルを変更します。それを達成することは可能ですか？

Answer 1

Javascriptを使用できます。 CSSファイルの名前で配列を作成し、配列からランダムな名前を選択してlinkタグを作成し、href属性をランダムな名前に設定してページの先頭に追加します。

<script> 
 
var sheets = ['explorer-turquoise','explorer','explorer-red','explorer-blue'], 
 
     randSheet = sheets[Math.floor(Math.random()*sheets.length)]; 
 

 
    var newSheet = document.createElement('link'); 
 
    newSheet.href = '/assets/css/' + randSheet + '.css'; 
 
    newSheet.rel = 'stylesheet'; 
 

 
    document.head.appendChild(newSheet); 
 
</script>