JavaScriptでCSSを動的に変更する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでCSSを動的に変更する方法について解説しています。ここではClass名を動的付与する方法、styleプロパティを使う方法、jQueryを使う方法を説明します。動きのあるサイト作りに役立ててください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでCSSを動的に変更する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでCSSを動的に変更する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

動的とは

画面上でユーザー操作をきっかけに画面が変化することを「動的」と呼びます。例えば、ボタンを押した瞬間にボタンの色が変わるような場合です。

 

CSSを動的に変更する方法

javascriptでHTML要素にClass名を動的付与することで、画面表示に変化を起こすことができます。

書式

documents.getElementById("id").classList.add("CSSクラス名");

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

styleプロパティを使う

事前にCSSのclassを用意しなくても、以下のようにstyle属性だけ付与することもできます。

書式

documents.getElementById("id").style.fontSize = "20px" ;

 

jQueryを使う

jQueryを使うと、もっと簡単にCSSを適用することができます。

class名を動的に付与する場合

$("id").addclass("className");

事前にclass定義が無い場合

// 各設定値をシングルクォートで囲うことに注意

$("id").css({ 'color' : 'red' , 'font-size' : '20px' } );

 

実際に書いてみよう

ボタンを押すと、div領域の背景色が付与され、テキストボックスの文字に変化が起こるプログラムを書いてみましょう。

html

<div id="dispArea" class="guideArea">
  <p id="guide">後からデザインを変更可能です</p>
  <input type="text" id="textBox" value="こんにちは">
</div>
<button type="button" onclick="cssTest()">CSS変更</button>

javascript

function cssTest() {
  // javascriptでdiv領域にCSSを付与
  document.getElementById("dispArea").classList.add("addColor");
  // jQueryでテキストボックスにCSSを付与
  $("#textBox").css( { 'font-size' : '18px' , 'color' : 'red' });
}

css

/* 静的付与済み */
.guideArea {
  margin-bottom: 10px;
  padding: 5px;
  border: solid 2px;
  width: 300px;
}
/* 背景色を付与 */
.addColor {
  background-color: #d5ecce ;
}

ボタン押下前イメージ

ボタン押下後イメージ

CSS変更ボタンを押下すると、CSSが動的に変更され、背景色とテキストボックスのフォントサイズ、色が付与されています。

 

まとめ

javascriptを使うことで、ユーザー操作に合わせてCSSを変更することができました。操作していて楽しいページ作りにぜひ活用してください。

 

監修してくれたメンター

寺谷文宏

WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。

TechAchademyではフロントエンド、Javaコースを担当。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。