【JavaScript入門】DOM操作でCSS(スタイル)を変更する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptのDOM操作でCSS(スタイル)を変更する方法を見ていきます。

1 DOMでCSS(スタイル)を変更する方法とルール
2 Sample-Code全文とHTML実行イメージ
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 Twitterやってます！Follow Me！
6 参考・引用
7 最近の投稿

DOMでCSS(スタイル)を変更する方法とルール

「element.style.style属性名 = “styleの値”;」の形でStyleを操作できる

DOMでCSS(スタイル)を変更する際は、指定したHTML要素の「style」プロパティを通して操作します。

構文: element.style.style属性名 = “styleの値”;

const robotama = document.querySelector('.robotama');

// 1. DOM操作でStyle操作 => element.style.style-key = "style-value";
robotama.style.color = "blue";

CSSのプロパティに「 – 」が入る場合「 – 」の部分は大文字にする

CSSのプロパティに「 – 」が入る場合は、大文字にするというルールがあるので注意してください。

const robotamaProject = document.getElementById('robotama-project');

// 2. CSSのプロパティに「 - 」が入る場合は、大文字にする
robotamaProject.style.textDecoration = "underline";

複数のスタイルを指定する場合は「style.cssText = “key: value; key:value”;」の形とする

DOM操作で複数のStyleを変更したい場合は、「 style.cssText 」を使用することで一度に複数のStyleを指定することができます。

構文: element.style.cssText = “key: value; key: value”;

const gunma = document.getElementById('gunma');

// 3. 複数のStyle指定 => element.style.cssText = "key: value; key: value";
gunma.style.cssText = "color: red; font-size: 20px;";

Sample-Code全文とHTML実行イメージ

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM-Style</title>
</head>
<body>

    <h1>DOM-操作でStyleを変更するロボ玉🔥</h1>
    
    <h2>CSS(スタイル)を変更する方法とルール</h2>

    <h2>1. styleプロパティを「.(ドット)」でつなげたものに、スタイルの値を代入する</h2>
    <p>Sample: element.style.color="blue";</p>

    <h2>2. CSSのプロパティに「-(ハイフン)」を含む場合,直後のアルファベットを大文字にする</h2>
    <p>Sample: element.style.textDecoration ="underline";</p>

    <h2>3. 複数のスタイルを指定する場合</h2>
    <p>Sample: element.style.cssText="color:blue; text-decoration:underline;";</p>

    <h2>DOM-Style-操作-Test🔥</h2>

    <h3 class="robotama">ただのロボ玉🔥</h3>

    <div id="robotama-project">
        <h3 class="project">ロボ玉開発計画🔥</h3>
        <ol>
            <li>ロボ玉試作1号機🔥</li>
            <li>ロボ玉試作2号機🔥</li>
            <li>ロボ玉試作3号機🔥</li>
        </ol>
        <button type="button">ロボ玉🔥</button>
    </div>
    
    <h3 id="gunma">神聖グンマー帝国🔥</h3>

    <h3>参考・引用</h3>
    <ol>
        <li>
            <a href="https://qiita.com/iwasaki-hub/items/d1b91f262298735a5d89" target="_blank">JavaScript DOM操作でCSS（スタイル）の変更を行う</a>
        </li>
    </ol>

    <script>

        const robotama = document.querySelector('.robotama');

        // 1. DOM操作でStyle操作 => element.style.style-key = "style-value";
        robotama.style.color = "blue";

        console.log({RobotamaStyle: robotama.style});

        const robotamaProject = document.getElementById('robotama-project');

        // 2. CSSのプロパティに「 - 」が入る場合は、大文字にする
        robotamaProject.style.textDecoration = "underline";

        console.log({ProjectStyle: robotamaProject.style});

        const gunma = document.getElementById('gunma');

        // 3. 複数のStyle指定 => element.style.cssText = "style-key: style-value;";
        gunma.style.cssText = "color: red; font-size: 20px;";

        console.log({GunmaStyle: gunma.style});


    </script>

</body>
</html>