いつもコピペで使っていて、いざ使おうとするといつもググっているので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
