CSSファイルを動的に差し替えてスタイルを変更する - JavaScript

JavaScriptを利用して、CSSファイルを動的に差し替えてスタイルを変更するコードを紹介します。

概要

ボタンやリンクのクリックでページにリンクされているCSSファイルを変更して、動的にページのスタイルを変更したい場合があります。
この記事ではJavaScriptを利用して、ページにリンクされているCSSファイルを動的に変更するコードを紹介します。

JavaScriptでCSSファイルを変更するには、linkタグにIDを記述し、document.getElementById() メソッドを呼び出しlinkタグのDOMオブジェクトを取得します。取得したDOMオブジェクトのhrefプロパティに変更したいスタイルシートのファイル名を代入することで、CSSファイルを動的に差し替えることができます。

プログラム例

コード

以下のHTMLファイルとCSSを準備します。

ChangeCssFile.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link id="PageStyleSheet" rel="stylesheet" href="Style1.css" />
  <script type="text/javascript">
    function changeStyleSheet() {
      var elem = document.getElementById("PageStyleSheet");
      elem.href = "Style2.css";
    }
  </script>
</head>
<body>
  <p class="title">CSSファイル変更デモ</p>
  <div class="frame1">
    枠1<br />
    ABCDEFG<br />
    1234567<br />
  </div>
  <p><a href="javascript:changeStyleSheet();">スタイルシート変更</a></p>
</body>
</html>

Style1.css

body {
}

.title {
  color:#005b9c;
  font-size:2rem;
}

.frame1 {
  color: #F0F0f0;
  background-color: #494949;
  border: 1px solid #202020;
}

Style2.css

body {
  background-color:#464331;
}

.title {
  color:#ff6a00;
  font-size:2rem;
}

.frame1 {
  color: #2e1300;
  background-color: #ffed89;
  border: 1px solid #c78c00;
}

解説

linkタグでスタイルシートとリンクします。リンク先のスタイルシートは Style1.css ファイルを指定します。
linkタグにid属性を記述します。idを設定することで、getElementById() メソッドでlinkタグの要素を取得できるようにします。

  <link id="PageStyleSheet" rel="stylesheet" href="Style1.css" />

changeStyleSheet() 関数を定義します。
document.getElementById() メソッドを呼び出し link タグのDOMオブジェクト要素を取得します。取得した要素の href プロパティに "Style2.css" を代入することで、linkタグのhref属性の値を動的に変更できます。変更により、Style2.css のスタイルが反映されたページに切り替わります。

  <script type="text/javascript">
    function changeStyleSheet() {
      var elem = document.getElementById("PageStyleSheet");
      elem.href = "Style2.css";
    }
  </script>

HTMLファイルでは、「スタイルシート変更」のリンクがクリックされると、changeStyleSheet()関数を呼び出しスタイルシートの差し替えを実行します。

  <p><a href="javascript:changeStyleSheet();">スタイルシート変更</a></p>

実行結果

上記のHTMLファイルをWebブラウザで表示します。
下図のページが表示されます。

ページ下部の[スタイルシート変更]のリンクをクリックします。CSSファイルが差し替えられページのデザインが変わります。

JavaScriptでリンクしているCSSファイルを動的に変更できました。

著者

Penta

iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

目次

CSSファイルを動的に差し替えてスタイルを変更する - JavaScript

概要

プログラム例

コード

解説

実行結果

関連するページ