【JavaScript】イベント処理ってなに？（addEventListener）
takahide
初心者がITを楽しむブログ
【JavaScript】JSでスタイルを変更したい（style/classList）
takahide
おはようございます。タカヒデです。
本日は、「JavaScriptにおいて、『スタイル』を変更する方法、及び『styleプロパティ』『classListプロパティ』」を紹介します。
こんな人にオススメ
- JavaScriptにおける『スタイルの変更』をしたい
- 『styleプロパティ』『classListプロパティ』の記載方法を知りたい
ぜひ本記事を参考にしてください。
Contents
スタイル/CSSとは
スタイル/CSS (Cascading Style Sheets) とは、WEBページのデザインやレイアウトを変更するコードのことです。
ちょっとでもWebを学んだことがある人なら当たり前みたいなものですね。
具体的なものを見てみましょう。
このようなもののデザインを変更することができます。
- 文字色
- 文字サイズ
- 背景色
- 余白
このCSSのおかげでオシャレなWebサイトが見れるわけですね。
逆にCSSがなかったら、テキストだけの単調なWebサイトになってしまうわけです。
実際にこのスタイルを記載しようと思ったら３つの記載方法があります。
このあたりはJavaScriptではなくHTMLの話なので注意してくださいね。
記載方法①：HTMLタグに書き込み
HTMLのタグ（<h1>,<p>等）に直接書き込みます。
<h1 style="color: #ff0000;">見出し１</h1>
こんな感じでテキストの色を赤になっています。
記載方法②：HTMLファイルのstyleタグに書き込み
HTMLファイル内にstyleタグ（< style >～< /style >）を作成し、その中に直接書き込みます。
<head>
<style>h2{font-size: 24px;color: #ff0000;}</style>
</head>
<body>
<h2>見出し２</h2>
</body>
styleタグは<head>の中に書くようにした方が、コードがごちゃつかず見やすいです。
記載方法③：CSSファイルを作成して読み込み
HTMLファイルとは別にCSSファイルを作成し、作成したCSSファイルに書き込みます。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>見出し３</h3>
</body>
h3 {
font-size: 18px;
color: #ff0000;
}
HTMLファイルの<head>にはCSSファイルを読み込むように記載しましょう。
スタイルの変更方法①：styleプロパティ
では、実際にJavaScriptにおいてスタイルを変更する方法を見ていきましょう。
まず一つ目の方法として、『styleプロパティ』を使用します。
これは、styleタグに対してアクセスする記載方法です。
//記載方法
要素.style.スタイルプロパティ=スタイルの値以下が記載例です。
<h1 id="text">見出し</h1>let testText = document.querySelector("#text");
testText.style.color = "#ff0000";実行してみるとこんな感じ。
JavaScriptを記載していなければ文字色が黒ですが、JavaScriptによってstyleを記載し、文字色が赤になっています。
スタイルの変更方法②：classListプロパティ
二つ目の方法として、『classListプロパティ』を使用します。
これは要素のclassにアクセスすることで、事前に記載していたCSSファイルのコードを反映する記載方法です。
//記載方法
要素.classList.メソッド(class名)以下が記載例です。
<h1 id="text">見出し</h1>.testStyle {
background-color: #0000ff;
}let testText = document.querySelector("#text");
testText.classList.add("testStyle");実行結果が↓です。
JavaScriptを記載していなければ文字に背景色はありません。
が、JavaScriptによってclassを追加し、CSSファイルに記載されたスタイルを反映することで背景色が青になっています。
なお、記載例で使用した『addメソッド』以外にもclassListメソッドは存在するようです。
主なものを紹介しておきます。
■主なclassListメソッド一覧
| メソッド | 機能 |
|---|---|
| add | クラスの追加 |
| remove | クラスの削除 |
| toggle | クラスの追加/削除 |
| contains | クラスが含まれているか確認 |
ぜひ他のメソッドも試してみてください。
まとめ
以上が「JavaScriptにおいて、『スタイル』を変更する方法、及び『styleプロパティ』『classListプロパティ』」でした。
まとめ
- スタイル/CSS：WEBページのデザインやレイアウトを変更するコードのこと
- JavaScriptでスタイルを変更するには以下2つの方法
- styleプロパティ：styleタグに対してアクセスする記載方法
- classListプロパティ：事前にCSSへ記載したコードを反映する方法
この記事が誰かの参考になれば幸いです。
お疲れさまでした。
ABOUT ME
通信会社の企画職で働く30代
非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中
IT初心者が楽しいと思えるように発信することを目指しています
↓Xもやっているのでフォローしてね
