純粋なJavascriptとjQueryでcssを追加する方法!Javascriptの勉強

いつもコピペで使っていて、いざ使おうとするといつもググっているのでJavascriptでのcss追加方法について勉強がてらまとめておきたいと思います。

jQueryでcssの値を追加する

jQueryでCSSを追加するサンプルコードを作成してみました。

See the Pen jQueryでcssの値を変更する by Nakamoto (@programmerlife) on CodePen.

1つのCSSを追加するときは以下のように書きます。

// 構文
$('cssセレクタ').css('プロパティ','値');

//サンプルコードの例
$("p").css('font-size', '20px');

複数のCSSを追加するときは以下のように書きます。

// 構文
$('cssセレクタ').css({'プロパティ':'値','プロパティ':'値'});

// サンプルコードの例
$("#style").css({ 'width': '100px', 'height': '100px', 'background-color': '#00b7ce' });

さすがjQuery短く書けます。

純粋なJavascriptでcssの値を追加する

JavascriptでCSSを追加するサンプルコードを作成してみました。見た目はjQueryと同じですが、書き方が異なります。

See the Pen XWMMwmm by Nakamoto (@programmerlife) on CodePen.

1つのCSSを追加するときは以下のように書きます。

document.getElementsByTagName("p")[0].style.fontSize = "20px";

試しにgetElementsByTagNameで取得してみましたが、idやクラスでも同じです。.style.fontSize= "20px"のようにスタイルを追加します。

複数のCSSを追加するときは以下のように書きます。

document.getElementById("style2").style.cssText = "width:100px; height:100px; background-color:#00b7ce";

「.style.cssText = "width:100px; height:100px; background-color:#00b7ce"; 」のようにcssTextを使うとCSSを複数書くことができます。1つのときでもこちらの方がCSSと同じ書き方でかけるので個人的には楽に感じます。

Javascriptでもそこまで面倒ではなさそうですね。

補足

cssの値で変数を使いたい場合は以下のように「{ }」を使うと適用されました。

要素.style.cssText += {width: 変数, marginLeft: 変数 }

波カッコの方が使いやすいのかも。

おわり

CSSを書くときにシングルクォーテーションやダブルクォーテーションを忘れると反映されなくて、気づくのに時間がかかりました。なくても動いているのも見かけて少しもやる。バージョンによる違いなんだろうか。。

参考

https://stackoverflow.com/questions/3968593/how-can-i-set-multiple-css-styles-in-javascript/47136113