Written by Kasumi

JavaScriptでHTML要素にCSSを追加する方法

JavaScriptでHTML要素にCSSを追加したい。

本記事ではこのような悩みを解決します。

JavaScriptでHTML要素にCSSを追加する方法

<div class="box">テキスト</div>
<script>
    const box = document.querySelector(".box");
    box.style.background = 'red';
    box.style.color = '#fff';
</script>

JavaScriptでHTML要素にCSSを追加するコード例です。

styleオブジェクトを使います。

使い方は以下の通りです。

HTML要素.style.CSSプロパティ名 = ‘値’;

上記のように記述する事で、JavaScriptで動的にCSSを追加できます。

まとめてCSSを追加する方法

const box = document.querySelector(".box");
box.style.cssText = 'background: red; color: #fff;';

まとめてCSSを追加したい場合はstyle.cssTextとすることで値にまとめてCSSプロパティを記述する事ができます。

まとめ

JavaScriptでHTML要素にCSSを追加する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

【JavaScript】コンストラクター関数を使ってオブジェクトの雛形を作成・インスタンス化する方法

2022.12.12
632
JavaScript

JavaScriptでJSONデータを読み込み・HTMLへ出力する方法

2022.10.16
21977
JavaScript

【JavaScript初心者向け】配列要素を追加・上書き・削除する方法

2022.08.22
3469
JavaScript

Javascriptでvideoタグのオプションを設定

更新日:2019.11.28
751