• JavaScript

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を追加する方法について紹介しました。

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