脱jQuery .css()

CSSの値の設定と取得に関しての書き換えです。jQuery はどちらも .css() で出来ますが、JavaScript の方は取得と設定ではコードが異なります。

詳しくは 脱jQuery その1 を御覧ください。

without-jquery

.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、とハイフン後大文字ルールを適用します。

まとめ

jQueryJavaScript
A.css("B", "C")A.style.B = "C"
A.css("B")document.defaultView.getComputedStyle(A, null).B
  1. 確かfloatプロパティは`.style.cssFloat`として参照しなければならなかったような…と思ったのですが、Chrome 47、Firefox 43、IE9、IE10,IE11で試したら、どのブラウザでも`.style.float`と`.style.cssFloat`の両方でfloatプロパティを参照できました。

    2016-01-02 23:33Reply
Top