JavaScriptを使うと、HTMLやCSSだけでは実現できない動的なスタイル変更が可能になります。
その中でも、最も基本となるのが styleプロパティ を使った方法です。
本記事では、JavaScriptのstyleプロパティで
CSSスタイルを直接変更する方法を、初心者向けに分かりやすく紹介します。
コードはシンプルなものだけを掲載しているので、
気になる部分は実際に手元で試しながら読み進めてみてください。
基本的な書き方
JavaScriptでは、styleプロパティを使うことでHTML要素のCSSを直接変更できます。
まずは最も基本となる書き方を確認しましょう。
document.querySelector('セレクタ').style.CSSプロパティ = '値';変更できる主なスタイル
styleプロパティでは、さまざまなCSSプロパティをJavaScriptから変更できます。
ここでは、よく使われる代表的なスタイルを紹介します。
以下のHTML要素を対象に、JavaScript側でスタイルを変更していきます。
<div id="box">スタイル変更対象</div>背景色を変更する
document.querySelector('#box').style.backgroundColor = 'lightblue';background-color は backgroundColor として指定します。
文字の色を変更する
document.querySelector('#box').style.color = 'white';テキストの見た目を動的に変えたい場面でよく使われます。
枠線を変更する
document.querySelector('#box').style.border = '2px solid blue';CSSと同じ指定方法で、まとめて設定できます。
幅・高さを変更する
document.querySelector('#box').style.width = '300px';
document.querySelector('#box').style.height = '100px';数値には 必ず単位（pxなど）を含める 必要があります。
余白を変更する（padding / margin）
document.querySelector('#box').style.padding = '10px 0 15px 8px';
document.querySelector('#box').style.marginBottom = '20px';レイアウト調整や簡単なUI変更でよく使われる指定です。
フォントサイズと太さを変更する
document.querySelector('#box').style.fontSize = '20px';
document.querySelector('#box').style.fontWeight = 'bold';文字の強調や可読性向上に役立ちます。
まとめ
styleプロパティを使えば、JavaScriptからCSSを直接変更できます。
シンプルな見た目の切り替えや動的なUI表現に便利で、基礎として押さえておきたい知識です。
規模が大きくなった場合は、classListとの使い分けを意識するとよいでしょう。
NAMEKO.ONLINE では、Web開発初学者向けのコンテンツを発信しております！
ぜひ、多くの方にシェアいただけますと嬉しいです！
コメント