JavaScript　コンボボックスでCSSを切り替える

戻る
公開日：2021/10/31
JavaScript　コンボボックスでCSSを切り替える

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

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

body {
	background-color:lightsteelblue;
}
body {
	background-color:pink;
}

次は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>
戻る