今回の記事では、jQueryを使用して要素のスタイルを操作する方法を解説します。
Webサイトのアニメーションを作成するにあたり、複雑なスタイルの操作が必要になる場合があります。
この記事の内容をマスターして、要素のスタイルの操作についてマスターしていきましょう。
css()の使い方
それでは早速、jQueryを使った要素のスタイル操作についてイメージを膨らませていきましょう。
この章では、css()の使い方を確認していきます。
要素にスタイルを追加する
まずは、要素にスタイルを追加してみましょう。
１つだけスタイルを記述する
以下のコードのような例を作成し、文字の色を赤色にしてみましょう。
<p class="sample-text">スタイルの操作を学ぼう。</p>$(".sample-text").css("color", "#f00");文字の色が赤くなれば大丈夫です。
上記の例のように、css()を用いることで、jsファイルの中でスタイルの記述することができます。
let sampleColor = "#f00";
$(".sample-text").css("color", sampleColor);そして、jsファイルの中でコードを記述しているので、変数用いてスタイルを管理することもできます。
変数を用いてスタイルを操作することができるので、css()は複雑なアニメーションを作る際などにも活用されることがあります。
複数のスタイルを記述する
また、css()を使用することで、要素に複数のスタイルを追加することも可能です。
css()を使用して複数のスタイルを記述する際は、書き方に少しクセがあるので注意しましょう。
プロパティ名は、JavaScriptでよく使用されるキャメルケースで記述します。
最初の単語は小文字、２つ目の単語の頭文字が大文字になると覚えておきましょう。
また、末尾に「,（カンマ）」を記述することも忘れないようにしましょう。
$(".sample-text").css({
color: "red",
fontSize: "20px",
fontWeight: "bold",
});上記の例のように、文字の色、大きさ、太さを変更しました。
let sampleStyle = {
color: "red",
fontSize: "20px",
fontWeight: "bold",
};
$(".sample-text").css(sampleStyle);また、変数を使ってまとめておくこともできるので、覚えておくと良いです。
要素のスタイルを変更する
次に、要素のスタイルを変更してみます。
css()を使用することで、もともと記述されていたスタイルを上書きすることができます。
元々のスタイルを変更する
まずは、デフォルトで文字の色を赤色にしておきます。
<p class="sample-text" style="#f00">スタイルの操作を学ぼう。</p>次に、文字の色をcss()を使用して、文字の色を変更していきます。
$(".sample-text").css("color", "#333");このようにすると、文字の色が赤色から黒色に変更されます
基準を元に値を変更する
css()では、元々のスタイルの値を基準にして、値を変更することが可能です。
試しに、文字の大きさを変えてみましょう。
元々の文字の大きさが24pxのテキストを用意します。
<p class="sample-text" style="font-size: 24px">スタイルの操作を学ぼう。</p>次に、css()を使用して値を追加していきます。
$(".sample-text").css("font-size", "+=16");上記のように記述すると、元々の24pxを基準にして値を追加します。
コードの例では「+=16」となっているので、「24 + 16 = 40px」の大きさになります。
要素のスタイルを取得する
最後に、要素のスタイルを取得してみましょう。
css()は、引数にプロパティ名を記述することで、要素に対しどのようなスタイルが適用されているか調べることができます。
どのようなスタイルが適用されているか調べる
今回の例では、テキストのスタイルをコンソールに出力して調べてみましょう。
<p class="sample-text">スタイルの操作を学ぼう。</p>.sample-text { margin: 40px; }上記の例では、テキストに対して「margin: 40px;」が指定されています。
let sampleStyle = $(".sample-text").css("margin");
console.log(sampleStyle);上記のコードを記述し、「40px」とコンソール画面に表示されれば大丈夫です。
使用する場面は少ないかもしれませんが、今回の例のように要素のスタイルを取得することができることを覚えておきましょう。
実際に確認してみよう
ここまででcss()の使い方について紹介してきました。
この記事で学んだことも、必ず実際にコードを記述してアウトプットしてください。
css()は今後とも目にするメソッドになるので、実際にコードを記述して挙動に慣れておくことをお勧めします。
