Ownedmedia ウェブ制作に役立つコンテンツを発信中!

JavaScript 2018.03.20

JavaScriptでCSSを操作してスタイルを設定する

Tags: ,,

普段のスタイルは基本的にCSSで管理されるかと思いますが、JavaScriptで動的にスタイルを変更する時に必要となります。また、jQueryを使う場合はcss()で簡単に指定することができますが、jQueryを使わない場合はまたやり方が変わってきます。あまり使うことはないかと思いますが、ちょうど使う機会があったので備忘録として残しておきたいと思います。

 

要素に対してスタイルを指定する方法はいくつかあるのですが、わかりやすく表記が簡単なのがいいかと思いますので、代表的な3パターンを今回の記事であげておきたいと思います。

 

[ELEMENT].style.[PROPERTY] = [VALUE]

要素を指定して続けて.styleと表記し、その直後にプロパティを記述します。そしてそれに対して値を入れる方法です。一般的にはこの方法がよく見られるようです。サンプルでは以下のようにIDやclass名で要素を取得し変数に置き換えてから使っています。

<div id="elem_01">
</div>
<script>
   var elem = document.getElementById('elem_01');
   elem.style.color = '#ff0';
   elem.style.marginBottom = '30px';
</script>

 

複数のプロパティは続けて記述します。また-(ハイフン)がある場合はハイフン直後の文字を大文字にするキャメルケースで対応します。

 

[ELEMENT].setAttribute(‘[ATTRIBUTE]’,'[PROPERTY]: [VALUE];’);

要素の属性値を書き換える方法です。要素のstyle属性を値指定で書き換える形になります。こちらも同じくIDやclass名で要素を取得し変数に置き換えてから使っています。

<div id="elem_01>
</div>
<script>
  var elem = document.getElementById('elem_01');
  elem.setAttribute('style','color: #ff0; margin-bottom: 30px;');
</script>

 

スタイルを追記する場合はgetAttribute()でstyle属性の値をあらかじめ取得しておき、それに追加するようにします。

 

[ELEMENT].style.setProperty(‘[ATTRIBUTE]’,'[PROPERTY]’,'[PRIORITY]’);

要素のスタイルのプロパティを優先度と合わせて指定する方法です。setProperty()の引数にはプロパティ、値、優先度の順に指定します。優先度には!importantなどを入れることができます。こちらも要素を取得してから使います。

<div id="elem_01">
</div>
<script>
  var elem = document.getElementById('elem_01');
  elem.style.setProperty('color','#ff0','');
  elem.style.setProperty('margin-bottom','30px','important');
</script>

 

JavaScriptでスタイルを操作することで、イベントに合わせたスタイル切り替えなどもできるようになります。jQueryを使うことで簡単に実装できますが、依存しないようにjavascritptで直接記述する方法も知っておくと便利です。

 

(参考にさせて頂いたサイト様)
JavaScriptからCSSを操作する方法を結構詳しく調べてみた

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?