コンボボックスの選択でCSSを切り替える

コンボボックスを変更したら、CSSファイルを切り替えるようにします。

まずはCSSファイルを二つ用意

blue.css

body {
	background-color:lightsteelblue;
}
							

pink.css

body {
	background-color:pink;
}
							

次はhtmlファイル。ファイルはすべて同じ階層にいれます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>サンプル</title>
  <link rel="stylesheet" type="text/css" href="red.css" id="cs">
  <script>
    function changeCss(){
      const str = document.getElementById("change").value;
      document.getElementById("cs").href = str + ".css";

    }
  </script>
</head>
<body>

  <select name="" id="change" onchange="changeCss();">
  	<option value="pink">ピンク色</option>
  	<option value="blue">水色</option>
  </select>

</body>
</html>