More than 3 years have passed since last update.

JavaScript　DOM操作でCSS（スタイル）の変更を行う

Last updated at 2020-12-27Posted at 2020-12-27

#CSS（スタイル）を変更する

index.html

    <!DOCTYPE html>
    <html lang="ja">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <h1>JavaScript Practice</h1>
        <dl>
            <dt>今日の天気</dt>
            <dd class="weather">晴れ</dd>
        </dl>
        <script src="index.js"></script>
    </body>

    </html>

#1,styleプロパティを「.(ドット)」でつなげたものに、スタイルの値を代入する

index.js

// styleプロパティを「.(ドット)」でつなげたものに、スタイルの値を代入する
let element = document.querySelector(".weather");
element.style.color="blue";


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

#3,複数のスタイルを指定する場合

index.js

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

JavaScript DOM操作でCSS（スタイル）の変更を行う

JavaScript　DOM操作でCSS（スタイル）の変更を行う