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

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

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

目次

はじめに

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

  • サル
  • イヌ
  • キジ

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

CSSの取得・追加・変更

CSSプロパティ

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

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

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

html

jQuery

非表示にする

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

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

html

jQuery

やっぱり表示する

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

html

jQuery

さいごに

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

次回はこちらです。

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

    あわせて読みたい記事