LoginSignup
5
1

More than 3 years have passed since last update.

@iwasaki-hub(ハナ)

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

Last updated at Posted 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のプロパティに「-(ハイフン)」を含む場合,直後のアルファベットを大文字にする

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
1