Nagashima Laboratory

配色の切り替え（JavaScript）

クリックイベントを使って配色を切り替える仕組みをつくります。

キーワード：イベント（click）

作成例（完成イメージ）

▼2色切替

▼複数色切替

下記の順番で進めます。

  1. CSSで切替後の配色を設定する
  2. JavaScriptを使って切り替えの設定をする

【準備】フォルダ：javascript_change_a

①JavaScriptを書くための準備で作成したフォルダ（空のHTML、CSS、JavaScriptが入っている）を準備します。GitHubからもダウンロードできます。

②フォルダの名前を「javascript_change_a」に変更します

HTMLとCSSファイルの準備

まず、コンテンツ部分を用意します。

▼index.html

  <header>
    <h1>JavaScript Color Change</h1>
  </header>
  <main>
    <button id="btn" type="button">Click Me</button>
    <p>背景色や文字色を切り替えます</p>
  </main>

ボタンを設置するには<input type="button">を使う方法もあります。button要素は開始タグと終了タグから成り立つため、画像を間に挟むこともでき、CSSでの設定もinputよりも柔軟に行えます。

参考

▼style.css

.black {
    background-color: #000;
    color: #fff;
}

HTMLのbody要素にclass="black"を適用し、背景色と文字色が変わることを確認します。確認ができたら、HTMLからclassを削除します。

▼index.html

<body class="black">

クリックイベントを使い、クラス名を切り替える仕組みを作ります。

▼script.js

const btn = document.querySelector('#btn');

btn.addEventListener('click', () => {
  document.body.classList.toggle('black');
});

classList.toggleは、クラスを付け外しするのに使う方法です。指定した要素にクラス名がついていなければ追加、ついていれば削除をします。

要素.classList.toggle('クラス名');

参考：ローディングアニメーション（classList.add/classList.removeの解説）

【補足】アロー関数・無名関数

上記のような関数の定義方法をアロー関数といいます。=>の部分が矢（arrow）のように見えることが名前の由来です。

今回の場合は、関数に名前をつけていないため、無名関数と呼ばれる書き方です（名前が付いている関数は、名前付き関数と呼ぶこともあります）。無名関数は一度しか呼び出されないようなケースで使われます。

【応用】複数のテーマに切り替える

先ほどの例では、ONかOFFかの2択でしたので、クラス名を切り替えるという処理をしましたが、複数のテーマがある場合には、別の書き方で実装します。

【準備】フォルダ：javascript_change_b

①JavaScriptを書くための準備で作成したフォルダ（空のHTML、CSS、JavaScriptが入っている）を準備します。GitHubからもダウンロードできます。

②フォルダの名前を「javascript_change_b」に変更します

HTMLとCSSファイルの準備

まず、コンテンツ部分を用意します。

▼index.html

  <header>
    <h1>JavaScript Color Change</h1>
  </header>
  <main>
    <button id="btn-a" type="button">Color A</button>
    <button id="btn-b" type="button">Color B</button>
    <button id="btn-c" type="button">Color C</button>
    <p>背景色や文字色を切り替えます</p>
  </main>

▼style.css

:root[data-theme="color-a"] {
    --color-main: orange;
    --color-sub: gold;
    --color-text: #000;
}

:root[data-theme="color-b"] {
    --color-main:  green;
    --color-sub: lightgreen;
    --color-text: #000;
}

:root[data-theme="color-c"] {
    --color-main: navy;
    --color-sub: blue;
    --color-text: #fff;
}

body {
    background-color: var(--color-main);
    color: var(--color-text);
}

p {
    background-color: var(--color-sub);
}

【補足】:root

:rootは、CSS の擬似クラスで、文書のルート要素（基点となるところ）を選択します。 HTML では :root は <html> 要素のことです。

【補足】CSS カスタムプロパティ（変数）

文書全体で再利用可能な設定をする方法です。よく使われるのは、色を定義しておき、同じ文書内で繰り返し使う方法です。

下記の例では、--main-bg-colorとして、red を定義しています。呼び出すときは、var()関数を使います。

:root {
  --main-bg-color: red;
}
body {
  background-color: var(--main-bg-color);
}

【補足】データ属性

:rootに設定している[data-theme]は、データ属性と呼ばれる書き方です。「data-○○ 」という形式で記述し、○○の部分を自分で決めることができます。JavaScriptやCSSを使って取り出すことができます。

:root[data-theme="color-a"] という記述は、HTML上で、<html lang="ja" data-theme="color-a">と指定されている状態を表しています。

▼script.js

const btnA = document.querySelector('#btn-a');
const btnB = document.querySelector('#btn-b');
const btnC = document.querySelector('#btn-c');

btnA.addEventListener('click', () => {
  document.documentElement.setAttribute('data-theme','color-a');
});

btnB.addEventListener('click', () => {
  document.documentElement.setAttribute('data-theme','color-b');
});

btnC.addEventListener('click', () => {
  document.documentElement.setAttribute('data-theme','color-c');
});

setAttribute は指定された要素の属性の値を設定する書き方です。属性が既に存在する場合は値が更新され、そうでない場合は指定された名前と値で新しい属性が置き換えられます。

今回の例では、ボタンクリック時に、data-theme 属性に対して、color-a、color-b、color-c の値が設定されます。

【応用】ボタンの形状を変える

▼style.css

/*ボタンの装飾*/
button {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: 1px solid #fff;
}

#btn-a {
    background-color: orange;
    color: #000;
}

#btn-b {
    background-color: green;
    color: #000;
}

#btn-c {
    background-color: navy;
    color: #fff;
}

最初から特定のテーマを適用させたい場合は、html要素にdata-theme=””を記述しておきます。

▼index.html

<html lang="ja" data-theme="color-a">

参考書籍・リンク