脱jQuery .css()

.css()（スタイルを設定）

jQuery

$("#main").css("color", "#000")

書き換え JavaScript

document.getElementById("main").style.color = "#000";

JavaScript で CSS の style を設定する命令は「.style.○○ = "□□"」です。 ○○にはプロパティ（color や height） 、□□には値（10px や center）を入れます。

プロパティの部分にはちょっとしたルールが合って下記のようなルールが有ります。

color ⇒ style.color
background-color ⇒ style.backgroundColor
box-shadow ⇒ style.boxShadow
-webkit-transform ⇒ style.webkitTransform

ハイフン（-）が入らないものはそのままでいいのですが、ハイフンが入るもの、background-color などはハイフンを消してハイフンの次の文字を大文字にするというルールがあります。ハイフンが入ったままではエラーになるので気をつけてください。

また、ベンダープレフィックス(-webkit- など)は最初のハイフンを消して次のハイフンの後ろの文字を大文字にする、というルールです。

値に関しては「""」で囲めば中身はそのままでOKです。

.css()（スタイルを取得）

jQuery

$("#main").css("color")

書き換え JavaScript

document.defaultView.getComputedStyle(document.getElementById("main"), null).color;

設定されている最終スタイルを取得するには document.defaultView.getComputedStyle(要素,null) を使います。ちょっと複雑ですが計算済みスタイルを取得する方法はこれです。今までと違って要素が最初には来ません。

null が入っていたりしますが、擬似要素についての設定です。ここでは話がそれるので書きませんが詳しく知りたい方は「getComputedStyle」で検索してみてください。

プロパティの指定は .color となっています。これは上記の設定の時と同じく font-size を取得したければ fontSize、とハイフン後大文字ルールを適用します。

まとめ