JavaScript | 6章：JavaScriptでCSSを操作しよう

INDEX

6章：JavaScriptでCSSを操作しよう

本章では、JavaScriptによるCSSの操作方法を学びます。

・CSSのほとんどのプロパティは、JavaScriptによって操作することが可能です。
・JavaScriptでCSSのプロパティを操作することにより、ページのスタイリングを動的に変化させることができます。
・文字サイズの大小を選択するボタンやアニメーションなど、アイディア次第でさまざまな仕組みを作ることができるでしょう。

【6-1】styleオブジェクトとは

※要素オブジェクトは、querySelectorメソッドやgetElementByIdメソッドなどを使用して、class名やid名を取得して作成します。

・1章では、全てのタグの要素はdocumentオブジェクトの配下に位置し、DOM（Document Object Model）と呼ばれるツリー構造を形成していることを学びました。

・3章では、documentオブジェクトのquerySelectorメソッドや、getElementByIdメソッドを使いDOMの各要素（ノード）を取得してオブジェクトとして扱う方法を学びました。

・そのDOMの要素オブジェクトの配下に位置するのが、styleオブジェクトです。

・このstyleオブジェクトには、ほぼ全てのCSS プロパティの情報が格納されており、この記述法によりJavaScriptでCSSプロパティの値を変化させることができます。

■ CSSプロパティ名の記述ルール

・style オブジェクトで設定するCSSプロパティ名の記述法にはルールがあります。

・1語で成り立つプロパティはそのままJavaScriptでも同じ表記で使用します。
名前に「-（ハイフン）」を含むものは、JavaScriptでは以下の表のように「ハイフンを取り除いた上で、2語目以降の頭文字は大文字にする」という表記法を使い書き換えます。

・3章でも解説しましたが、この表記法のことをキャメルケースと呼びます。

CSSプロパティ名の記述ルール対応表

CSSの表記	JavaScriptの表記
color	color
width	width
background-color	backgroundColor
font-size	fontSize
border-bottom-color	borderBottomColor

【6-2】演習　ボタンクリックで文字サイズを変える

ここまでに学んできたJavaScriptによるCSSプロパティの操作法を使い、次のサンプルを作成してみましょう。

「大」「中」「小」のリンクボタンをクリックすると、本文テキストの文字サイズが変化するという仕組みです。

まずは、以下のダウンロードリンクから演習素材データをダウンロードしてください。

JS 6章演習素材データ

「start」フォルダ内の「font-size_change.html」をエディタで開きましょう。

start/font-size_change.html

<body>
  <ul class="btn">
    <li>
      <a href="#" class="large btn-link">大</a>
    </li>
    <li>
      <a href="#" class="medium btn-link">中</a>
    </li>
    <li>
      <a href="#" class="small btn-link">小</a>
    </li>
  </ul>

  <main class="main-contents">
    <p class="main-text">
      本章では、JavaScriptによるCSSの操作方法を学びます。
      <br />
      CSSのほとんどのプロパティは、JavaScriptによって操作することが可能です。
      <br />
      JavaScriptでCSSのプロパティを操作することにより、ページのスタイリングを動的に変化させることができます。文字サイズの大小を選択するボタンやアニメーションなど、アイディア次第でさまざまな仕組みを作ることができるでしょう。
    </p>
  </main>
</body>

サンプルコード6-1

☝サンプルコード6-1の解説

・「大」「中」「小」ボタンはaタグで作成されています。
・すでに各タグにはclass名がつけてありますので、それらを取得してDOMを操作していきます。

以下の表のとおりに処理内容を作成します。

イベント	イベント発生時の処理内容
「大」ボタンのクリック時	font-size を24pxに処理する
「中」ボタンのクリック時	font-size を16pxに処理する
「小」ボタンのクリック時	font-size を12pxに処理する

・それでは、JavaScriptのコードを書いていきましょう。

<script></script>
</body>
</html>

サンプルコード6-2

☝サンプルコード6-2の解説
</body>の直前に<script></script>を入力します。

■ querySelectorメソッドでオブジェクトを作成する

「大」ボタンのインタラクションを作成する

マークアップ部分

<a href="#" class="large btn-link">大</a>

サンプルコード6-3

JavaScript

//大ボタン
document.querySelector(".large").addEventListener("click", function () {
  //ここにclickイベント発生時の処理を記述する。
});

サンプルコード6-4

☝サンプルコード6-3、6-4の解説
・まずは「大」ボタンのインタラクションを作成します。
- scriptタグ内にサンプルコード6-4を記述します。
- querySelectorメソッドで「大ボタン」のclass名「large」を取得して、addEventListenerメソッドでclickイベントを設定します。

JavaScript

//大ボタン
document.querySelector(".large").addEventListener("click", function () {
  document.querySelector(".main-text").style.fontSize = "24px";
});

サンプルコード6-5

☝サンプルコード6-5の解説
・次に、clickイベント発生時の処理を作成します。
querySelectorメソッドでpタグのclass名を取得してstyleオブジェクトにアクセスし、CSSのfont-sizeプロパティを参照して文字サイズを設定します。
・このとき、font-sizeプロパティをfontSizeとキャメルケースで表記するところがポイントです。
※「CSSプロパティ名の記述ルール」節を参照

JavaScript 6-1

「中」「小」ボタンのイベント処理も作成する

続いて、「中」「小」ボタンのイベント処理も同様のコードで作成します。

JavaScript

//大ボタン
document.querySelector(".large").addEventListener("click", function () {
  document.querySelector(".main-text").style.fontSize = "24px";
});

//中ボタン
document.querySelector(".medium").addEventListener("click", function () {
  document.querySelector(".main-text").style.fontSize = "16px";
});

//小ボタン
document.querySelector(".small").addEventListener("click", function () {
  document.querySelector(".main-text").style.fontSize = "12px";
});

サンプルコード6-6

これで完成です。

ブラウザプレビューしてみましょう。

JavaScript 6-2

コード全体

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>文字サイズを変化させる</title>
    <link href="css/style.css" rel="stylesheet" />
  </head>

  <body>
    <ul class="btn">
      <li><a href="#" class="large btn-link">大</a></li>
      <li><a href="#" class="medium btn-link">中</a></li>
      <li><a href="#" class="small btn-link">小</a></li>
    </ul>

    <main class="main-contents">
      <p class="main-text">
        本章では、JavaScriptによるCSSの操作方法を学びます。
        <br />
        CSSのほとんどのプロパティは、JavaScriptによって操作することが可能です。
        <br />
        JavaScriptでCSSのプロパティを操作することにより、ページのスタイリングを動的に変化させることができます。文字サイズの大小を選択するボタンやアニメーションなど、アイディア次第でさまざまな仕組みを作ることができるでしょう。
      </p>
    </main>
    <script>
      //大ボタン
      document.querySelector(".large").addEventListener("click", function () {
        document.querySelector(".main-text").style.fontSize = "24px";
      });

      //中ボタン
      document.querySelector(".medium").addEventListener("click", function () {
        document.querySelector(".main-text").style.fontSize = "16px";
      });

      //小ボタン
      document.querySelector(".small").addEventListener("click", function () {
        document.querySelector(".main-text").style.fontSize = "12px";
      });
    </script>
  </body>
</html>

サンプルコード6-7

■ querySelectorAllメソッドを使ってオブジェクトを作成する場合

ところで、「大」「中」「小」ボタンのaタグには、3つに共通のclass名として、btn-linkという名前がつけてあります。

<ul class="btn">
  <li><a href="#" class="large btn-link">大</a></li>
  <li><a href="#" class="medium btn-link">中</a></li>
  <li><a href="#" class="small btn-link">小</a></li>
</ul>

サンプルコード6-8

・この共通のclass名を取得して「大」「中」「小」ボタンの要素オブジェクトを作成する場合は、querySelectorAllメソッドを使います。

・querySelectorメソッドとquerySelectorAllメソッドの使い方の違いは以下の通りです。

メソッド名	使う場面
querySelectorメソッド	該当する最初の1つの要素を取得したいとき。
querySelectorAllメソッド	該当する複数の要素を全部取得したいとき。

document.querySelectorAll(".btn-link")

サンプルコード6-9

☝サンプルコード6-9の解説
・このように記述すれば、3つのaタグ全てを同時に取得して要素オブジェクトを作成することができます。
・その中から「大」ボタン、つまり最初の要素オブジェクトを参照する場合は、次のように記述します。

querySelectorAllメソッドでまとめて取得した要素オブジェクトへのアクセス方法

最初の要素オブジェクトへのアクセス

document.querySelectorAll(".btn-link")[0]

サンプルコード6-10

☝サンプルコード6-10の解説
・最初の要素オブジェクトへのアクセスは、document.querySelectorAll(".btn-link")の後ろに[0]を記述します。
・画像オブジェクトやフォームオブジェクトのように、添字（インデックス番号）を使って各要素にアクセスします。

2つめの要素オブジェクトへのアクセス

document.querySelectorAll(".btn-link")[1]

サンプルコード6-11

☝サンプルコード6-11の解説
・「中」ボタン、つまり2つめのaタグを参照する場合は、こののように、document.querySelectorAll(".btn-link")の後ろに[1]を記述します。

3つめの要素オブジェクトへのアクセス

document.querySelectorAll(".btn-link")[2]

サンプルコード6-12

☝サンプルコード6-12の解説
・「小」ボタン、つまり3つめのaタグを参照する場合は、このように、document.querySelectorAll(".btn-link")の後ろに[2]を記述します。

サンプルコード6-6の書き換え

//大ボタン
document.querySelectorAll(".btn-link")[0].addEventListener("click", function () {
    document.querySelector(".main-text").style.fontSize = "24px";
  });

//中ボタン
document.querySelectorAll(".btn-link")[1].addEventListener("click", function () {
    document.querySelector(".main-text").style.fontSize = "16px";
  });

//小ボタン
document.querySelectorAll(".btn-link")[2].addEventListener("click", function () {
    document.querySelector(".main-text").style.fontSize = "12px";
  });

サンプルコード6-13

☝サンプルコード6-13の解説
・サンプルコード6-6、このように書き換えることが可能です。

ここまでの学習では、この添字の便利さを存分に味わうことがまだできていません。
後の章で変数、配列、ループ処理などを学習する過程で、この添字を使ったコードを無駄のない、修正しやすいコードに書き換えていきたいと思います。

これで「6章：JavaScriptでCSSを操作しよう」の解説を終わります。

次の章に進みましょう。

前の章に戻る次の章に進む

6章：JavaScriptでCSSを操作しよう

【6-1】styleオブジェクトとは

■ CSSプロパティ名の記述ルール

【6-2】演習 ボタンクリックで文字サイズを変える

JS 6章 演習素材データ

■ querySelectorメソッドでオブジェクトを作成する

JavaScript 6-1

JavaScript 6-2

■ querySelectorAllメソッドを使ってオブジェクトを作成する場合

【6-2】演習　ボタンクリックで文字サイズを変える

JS 6章演習素材データ