【jQuery入門 7】CSSの取得・追加・変更をしよう

【jQuery入門 7】CSSの取得・追加・変更をしよう

  • このエントリーをはてなブックマークに追加

こんにちはかめのです。
前回:【jQuery入門 6】要素の書き換え 追加・削除

前回は要素の書き換えなどでした。

今回はjQueryのCSSの取得・変更・追加についてご紹介します。

目次

はじめに

桃太郎に登場するどうぶつといえば

  • サル
  • イヌ
  • キジ

ですね。
それではどうぶつたちを使って、CSSの取得・追加・変更についてみていきましょう。

CSSの取得・追加・変更

CSSプロパティ

$('.demo').css('color','red');

CSSプロパティとは.cssのあとに入る”color”などのこと。
ここでスタイルシートの指定ができます。

今年は申年なので「サル」だけ色を変えてみたいと思います。

DEMO 01 : 今年の干支のどうぶつ

html

<ul class="momotaro">
    <li class="saru">サル</li>
    <li class="inu">イヌ</li>
    <li class="kiji">キジ</li>
</ul>

jQuery

$(function() {
    // DEMO 01 :
    $('.momotaro .saru').css('color', '#cc0000');
});

非表示にする

よく見ると、この中に「干支」に登場していないどうぶつがいます。
そのどうぶつを非表示にしてみたいと思います。

DEMO 02 : 干支に登場しているどうぶつだけを表示

html

<ul class="momotaro">
    <li class="saru">サル</li>
    <li class="inu">イヌ</li>
    <li class="kiji">キジ</li>
</ul>

jQuery

$(function() {
    // DEMO 02 :
    $('.momotaro .kiji').hide();
});

やっぱり表示する

DEMO 03 : やっぱり桃太郎に登場するどうぶつを表示

html

<ul class="momotaro">
    <li class="saru">サル</li>
    <li class="inu">イヌ</li>
    <li class="kiji">キジ</li>
</ul>

jQuery

$(function() {
    // DEMO 03 :
    $('.momotaro .kiji').show();
});

さいごに

いかがでしたか?
使い方はとても簡単!
いつも使っているスタイルシートとほぼ同じなのでとてもわかりやすいですね。
CSSプロパティで指定すれば簡単に変更できます。
表示、非表示も適用させたいセレクタに指定すればよいのでとても便利ですね。

次回はこちらです。

  • 【jQuery入門8】ウィンドウや要素の大きさを取得してみよう。
  • 参考URL
    http://api.jquery.com/css/
    http://api.jquery.com/show/
    http://api.jquery.com/hide/

    • このエントリーをはてなブックマークに追加

    記事作成者の紹介

    かめの(マークアップエンジニア)

    趣味は昼寝です。

    フロントエンドエンジニア募集中!

    ×

    SNSでも情報配信中!ぜひご登録ください。

    ×

    SNSでも
    情報配信中!
    SONICMOOV Facebookページ SONICMOOV Twitter
    フロントエンドエンジニア募集中!

    新着の記事

    mautic is open source marketing automation