jQueryでCSSを動的に変更・追加・削除する方法

jQueryで動的にCSSを変更する場合の記述を紹介します。
今回のdemoで変更する要素は、下のHTMLとCSSです。

HTML/CSS

<div class="demo1">
  <p>今日のテンションは<span>すげぇ高い</span>ぜ！</p>
</div>
<style>
  .demo1 {
    width: 100%;
    height: 200px;
    padding-top: 9%;
    background: #ededed;
    border-radius: 24px;
  }
  .demo1 p {
    font-size: 24px;
    text-align: center;
  }
  .demo1 p span {
    font-size: 32px;
    font-waight: bold;
    color: #22cda9;
    display: inline-block;
  }
</style>

初めての目次

CSSを変更
CSSを追加
CSSを削除

CSSを変更

まず最初はjQueryで「.demo1 p span」の色とテキストを変更してみます。
CSSを変更するには「.css({})」を使って変更できます。
テキストの変更は「.text()」を使います。

DEMO

今日のテンションはすげぇ高いぜ！

jQuery

$(function() {
  $(".demo1 p span").css({color: "#3183cf"});
  $(".demo1 p span").text("かなり低い");
});

CSSを追加

CSSを追加する時も、「.css({})」を使います。
変更と違うのは、もともとのCSSに無い要素を「.css({})」を使って書くことです。
今度は、「.demo1 p 」に背景を付けてみます。

DEMO

今日のテンションはすげぇ高いぜ！

$(function() {
  $(".demo1 p").css({background: "#ffdd9c"});
});

CSSを削除

要素に当てたスタイルを削除する場合もまた「.css({})」を使います。
CSSを削除する場合は、変更する場合と似ていて元々あるスタイルをjQueryで上書きします。
今回は「.demo1」の背景を削除します。

DEMO

今日のテンションはすげぇ高いぜ！

$(function() {
  $(".demo1").css({background: "none"});
});

この他にCSSを変更して、色々試してみてください！
ちなみに「font-size」などの真ん中の「 – 」は使えないので、この様に「fontSize」真ん中の「 – 」の後は大文字にします。
「backgroundPosition」や「paddingTop」、「marginBottom」なども、うっかり間違えやすくて、jQueryが動かなくて数時間、悩むことになるので気を付けてください。