スライドショー

【JavaScript入門】初心者でも分かる!CSS操作と変更方法について

こんにちは!エンジニアのワカツキです!

最近では、jQueryなどのフレームワークへの依存を減らして、純粋なJavaScriptを使うことも多くなりました。そこで今回は、JavaScriptのみでCSSを操作する方法を解説していきたいと思います!

この記事では、以下の内容について解説します。

  • JavaScriptでCSSを直接変更する方法
  • JavaScriptでクラス名を変更する方法
  • JavaScriptでCSSファイルを読み込む方法

それぞれの方法をしっかりと学習して、JavaScriptによるCSS操作をマスターしましょう!

JavaScriptでCSSを操作するには

JavaScriptでCSSを操作するには、以下のような方法があります。


① styleプロパティを直接変更する
② CSSクラス名を変更する
③ スタイルシートを読み込む

要素ごとにスタイルを変更したい場合は①を、CSSをクラスで管理したい場合は②を、まとめてスタイルシートを変更する場合は③など、用途によって方法を変えましょう。

styleプロパティを使った方法

JavaScriptを使って動的にCSSを変更する際によく使われる方法として、styleプロパティを操作するやり方があります。

DOM要素を使って目的のHTML要素のstyleを変更する基本的な方法について学んでいきましょう!

基本的なCSSを変更する方法

まずは、もっとも基本となるCSSの変更方法から見ていきましょう!

やり方は簡単で、対象のHTML要素を取得してstyleプロパティに任意のCSSを追加するという方法です。

例えば、p要素のテキストカラーを赤色に変更してみましょう!

//id属性値「text」のp要素を取得する
var p = document.getElementById('text');

p.style.color = '#f00';

この例では、getElementById()を使ってp要素を取得してからstyleプロパティにCSSを追加していますね。テキストカラーを変更したければ「color」プロパティに色情報を指定すればOKです。

この時に、CSSプロパティはキャメルケースで記述しなければいけないので注意が必要です! 例えば、「font-size」を指定したければ「style.fontSize」と記述する必要があるわけです。

複数のCSSプロパティを変更する方法

さて、styleプロパティを設定すれば目的のHTML要素のCSSを変更できることが分かりました。

それでは、複数のプロパティを変更したい場合はどのようにすれば良いでしょうか?普通に考えると以下のような記述になるでしょう。

var elem = document.getElementById("test");
  
elem.style.fontSize = '32px';
elem.style.color = '#f00';
elem.style.marginLeft = '100px';

この例のように、変更したいCSSプロパティを1つずつ指定していくわけです。これでも問題はありませんが、変更したいプロパティが多くなればなるほどコードの記述がとても単調になり修正も大変になります。

そこで、変更したいCSSプロパティをオブジェクトにしておく方法があります。

var myStyle = {
  fontSize: '32px',
  color: '#00f',
  marginLeft: '100px'
  
}

このように、変更したいプロパティと値をペアにしたオブジェクトデータにするわけです。

そして、このオブジェクトをfor-in文を使って対象のHTML要素のstyleプロパティに当てはめるわけです!

var elem = document.getElementById("test").style;
  
for(var prop in myStyle) {
  
  elem[prop] = myStyle[prop];
  
}

このように、for-in文を使ってオブジェクトの各要素を、取得したHTML要素のstyleプロパティに代入するわけです。この方法を使えば、変更したいCSSプロパティが増えてもコードの修正は最小限に抑えられるわけです。

jQueryでCSSを変更する方法

jQueryを活用するとさらに効率よくCSSを変更できるので合わせてご紹介しておきます!

例えば、p要素のテキストカラーを変更するには「css()」メソッドを使います。

$('p').css('color', '#f00');

通常のJavaScriptでstyleプロパティを利用した方法よりも少ない記述で簡潔に書けていますね。

また、「css()」メソッドは複数のCSSプロパティを変更することも可能です!

$('p').css({
    'color':'#f00',
    'font-size':'28px',
    'font-weight':'bold'
});

このように直接オブジェクト形式のデータを追記するだけなので簡単です。

「css()」メソッドは他にもstyleの取得や更新・関数の設定なども可能で、次の記事で詳しくまとめているのでぜひ参考にしてみてください!

jQueryのcss()でスタイルの取得・追加・変更まとめ!
更新日 : 2019年5月2日

要素のクラス名を変更する方法

各要素のクラス名を変更することでスタイルを変更することもできます。

classListというプロパティを使って、クラス名を追加したり削除できます。以下がクラス操作のサンプルです。

// to_be_class_changedというidの要素を取得
var element = document.getElementById('to_be_class_changed');

element.classList.add('should-be-added'); // クラス名の追加
element.classList.remove('should-be-removed'); // クラス名の削除
element.classList.toggle('should-be-toggled'); // クラス名がなければ追加、あれば削除
 
// 要素.classList.contains('クラス名')で、クラス名が存在するかどうかを確認できます。
console.log(element.classList.contains('should-be-added'));  // => 追加したので、true
console.log(element.classList.contains('should-be-removed'));  // => 削除したので、false

スタイルシートを読み込む方法

JavaScriptでは、スタイルシート(CSSファイル)をlinkタグを使って読み込むことで、スタイルシートをdocumentに適用することもできます。

以下は、CSSフレームワークであるbootstrapのスタイルシートをドキュメントに読み込む例です。実行すると、bootstrapのCSSが全体に適用されるようになります。

  var head = document.head;
  var linkElement = document.createElement("link");

  linkElement.type = "text/css";
  linkElement.rel = "stylesheet";
  linkElement.href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css";

  head.appendChild(linkElement);

まとめ

いかがだったでしょうか?

今回は、JavaScriptを用いてCSSを操作する様々な方法を解説しました。様々な方法を覚えておくことで、用途によって最適な方法を選択して無駄なくコーディングができます。

今回の内容を忘れずに今後の開発に活かしましょう!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ワカツキ ヒロアキ

ワカツキ ヒロアキ

目黒のベンチャー企業ででフルスタックエンジニアをやっています!今はWEB・スマホアプリ開発をメインに、毎日、仕事+アウトプットを目標に日々過ごしています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説