0%

Programmingプログラミングナレッジ

Posted:2018.03.20

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

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】