JavaScriptで要素のスタイルを操作する方法を完全解説！styleプロパティ入門

1. JavaScriptのDOM操作とスタイルの関係

1. JavaScriptのDOM操作とスタイルの関係

JavaScriptのDOM操作とは、Webページに表示されているHTMLを、あとから自由に変更する仕組みです。その中には、文字の内容を変えるだけでなく、色や大きさといった見た目を変える操作も含まれます。

この見た目のルールを決めているのがCSSです。そしてJavaScriptは、そのCSSの一部を直接書き換えることができます。

たとえるなら、HTMLは人形、CSSは服、JavaScriptは服を着替えさせる手のような存在です。

2. styleプロパティとは何か

2. styleプロパティとは何か

styleプロパティは、JavaScriptから直接CSSを指定するための仕組みです。要素一つ一つに対して、「この色にする」「この大きさにする」と命令できます。

CSSファイルに書くのではなく、その場で一時的に見た目を変えるイメージです。

初心者の方は、「styleは見た目専用の引き出し」と覚えると理解しやすくなります。

3. 文字の色を変更する方法

3. 文字の色を変更する方法

まずは、文字の色を変えてみましょう。これは一番よく使われるスタイル操作です。

<p id="sampleText">この文字の色が変わります</p>

const text = document.getElementById("sampleText");
text.style.color = "red";

このコードを実行すると、文字が赤色になります。colorは文字色を表すCSSの名前です。

CSSでは「color: red;」と書きますが、JavaScriptでは「style.color」と点でつなげて書きます。

4. 背景色やサイズを変更する

4. 背景色やサイズを変更する

文字だけでなく、背景の色や大きさも変更できます。

<div id="box">箱の中身です</div>

const box = document.getElementById("box");
box.style.backgroundColor = "lightblue";
box.style.width = "200px";
box.style.height = "100px";

ここで出てきたbackgroundColorやwidth、heightもCSSの名前です。

CSSではハイフンを使いますが、JavaScriptでは大文字にしてつなげます。これをキャメルケースと呼びます。

5. 表示・非表示を切り替える

5. 表示・非表示を切り替える

スタイル操作では、要素を表示したり隠したりすることもできます。

これは「今は見せない」「必要になったら見せる」といった場面で使われます。

box.style.display = "none";

画面から要素が消える

再び表示したい場合は、displayをblockなどに戻します。

6. style操作を使うときの考え方

6. style操作を使うときの考え方

styleプロパティはとても便利ですが、たくさんの見た目を一度に変えると、コードが読みにくくなります。

基本は「少しだけ見た目を変えたいとき」に使うのがおすすめです。

色を変える、隠す、強調する、といったシンプルな操作から始めると、混乱せずに学べます。

7. スタイル操作が使われる身近な例

7. スタイル操作が使われる身近な例

エラーメッセージを赤く表示する、選択中の項目を目立たせる、ボタンを押せない状態にするなど、さまざまな場面でstyle操作が使われています。

これらはすべて、JavaScriptでスタイルを一時的に変更することで実現されています。

styleプロパティの基本を理解すると、Webページが動いて見える理由が、よりはっきりとわかるようになります。