最新！JavaScript入門講座ーDOMによるスタイルの変化を解説！

ウェブサイトを構築する上で、最も基礎的なのがHTMLです。そして、HTMLをよりユーザが見やすいようなデザインを起こすのがCSSになります。

しかし、ユーザが操作することによって色やDOMを変化させたいといった考えもあります。それを可能にするのがDOMによるスタイルの操作です。

今回は、初学者の方向けに、DOMによるCSSのスタイル操作についてわかりやすく解説していきます！
今回の内容もとても重要で、後になって応用が効いてくる内容ですので、しっかりと理解していきましょう！

本記事のペルソナ

JavaScript初学者の方
HTMLとCSSの基礎がわかる方
JavaScriptで動的なスタイリングについて学びたい方
DOMについて学びたい方

DOMによる動的なスタイルの変化(document.style)
まとめ
参考文献

DOMによる動的なスタイルの変化(document.style)

では、解説に入っていきます。
まずは、次のようなHTMLファイルを用意しましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        <div>
            <div id="js-col-bg1">
                <h2>
                    背景の色が変わります。
                </h2>
                <p>
                    ・楽天証券<br/>
                    ・SBI証券<br/>
                    ・マネックス証券
                </p>
            </div>
            <div id="js-col-bg2">
                <h2>
                    文字と背景の色が変わります。
                </h2>
                <p id="js-font-col">
                    ・Amazon.com inc. (AMZN)<br/>
                    ・Alphabet inc. (GOOL)<br/>
                    ・Apple inc. (APPL)
                </p>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>

続いて、次のようなJSファイルを作りましょう。

const doc = document;
const bg1 = doc.getElementById("js-col-bg1");
const bg2 = doc.getElementById("js-col-bg2");
const font = doc.getElementById("js-font-col");

bg1.style.backgroundColor = "#FFD489";
bg2.style.backgroundColor = "#5AB1FE ";
font.style.color = "#ffffff";
font.style.fontWeight = "bold";

2つが用意できましたら、HTMLファイルをブラウザで開き、いつものディベロッパー・ツールを使いましょう。

要素を見てみると、しっかりとスタイルが充てられていることがわかるかと思います。
では、解説していきます。

DOM要素のプロパティとして、styleを使用することが可能です。このstyleプロパティからスタイルをそれぞれスタイル要素をプロパティで指定することが可能です。

スタイルメソッド