【中学生でもわかる】JavaScriptのstyleについて

こんにちは、フローです。

今回は、JavaScriptにおける重要なプロパティである

styleについて深堀りします。

Webページのスタイリングを動的に変更するためには、このstyleプロパティが不可欠です。

1 styleとは
2 どんな時に使うのか
- 2.1 パターン3つ
3 styleの注意点
4 まとめ

styleとは

JavaScriptのstyleプロパティは、HTML要素のインラインスタイルを読み取ったり、

変更したりするために使用されます。

つまり、

要素に直接適用されたCSSスタイルにアクセスするためのものです。

どんな時に使うのか

styleプロパティは、ユーザーのアクションや特定の条件に基づいて

、ページ上の要素のスタイルを動的に変更したいときに使います。

例えば、

ボタンがクリックされたときにその色を変更したり、

エラーメッセージを赤く表示したりするときなどに使用します。

パターン3つ

それでは、

styleプロパティの具体的な使用例を見てみましょう。

要素の背景色を変更する

let div = document.querySelector("div");
div.style.backgroundColor = "lightblue"; // divの背景色を薄い青色に変更

このコードでは、div要素の背景色を”lightblue”に変更しています。

要素の幅と高さを変更

let div = document.querySelector("div");
div.style.width = "100px"; // divの幅を100ピクセルに変更
div.style.height = "100px"; // divの高さを100ピクセルに変更

この例では、div要素の幅と高さをそれぞれ100ピクセルに設定しています。

要素のスタイルを動的に変更

let button = document.querySelector("button");
button.addEventListener("click", function () {
  button.style.color = "red"; // ボタンがクリックされたときに、その色を赤に変更
});

このコードでは、ボタンがクリックされるたびに、そのテキストの色が赤に変わります。

styleの注意点

しかし、styleプロパティを使用する際には注意が必要です。

それは、

styleプロパティはインラインスタイルにしかアクセスできず、

外部CSSファイルや<style>タグ内のスタイルにはアクセスできない点です。

let div = document.querySelector("div");
console.log(div.style.width); // 空文字列が返される

このコードでは、

外部CSSファイルで設定されたdivの幅を取得しようとしていますが、

結果的に空文字列が返されます。

これは、styleプロパティがインラインスタイルにしかアクセスできないためです。

まとめ

JavaScriptのstyleプロパティは、Webページの見た目を動的に制御する強力なツールです。

ただし、その範囲と制限を理解することが非常に重要です。

本日学んだことを活用して、自分だけの色鮮やかなWebページを作ってみてください。

次回もお楽しみに。皆さんのプログラミング学習が充実したものになることを願っています。

レッツチャレンジ！

カテゴリー