普段のスタイルは基本的に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を操作する方法を結構詳しく調べてみた