Blog

JavaScriptでCSSを操作する方法

2015.11.17Cat:javascript デザイナー
nino-eye

jQueryでCSSを操作する場合、

例えば

上記のようなCSSを設定したければ、

のように記述すれば操作ができます。

 

ただ、案件によってはjQueryのが利用できなかったり、

対象の要素がSVGなどでブラウザによって認識されないなど、

jQueryを使わずにJavaScriptでCSSを操作する必要があります。

そこで、JavaScriptでのCSSの操作方法をまとめてみました。

 

方法

対象となる要素はIDやタグ名などで指定し、変数に保存します。

保存した対象要素に対して、

要素.style.プロパティ = “値”;

と記述することで、CSSを変更することができます。

font-sizeのようにハイフンが入っていたり、-webkit-transitionのようにベンダーブレフィックスが含まれるプロパティは、

fontSize、webkitTransitionのように続く単語の先頭を大文字にして繋げるローワーキャメル方式で記述することで指定できます。

 

参考サイト

CSS属性値を変える [Java Script – (style) – CSS – Tips]

document.getElementsByTagName – Web API インターフェイス | MDN

document.getElementsByClassName – Web API インターフェイス | MDN

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ