jQueryを使ってCSSを操作してみよう【 jQuery基礎】
2014/05/19
先日投稿したjQueryの記事に続いて今回は実際にプログラムを書いていきます。
前回の記事の「ブラウザに依存しないセレクタエンジンを使ったDOMエレメントの選択」、「CSS操作」にあたる部分を取り扱います。
まずはjQueryを学習するにあたり必要となるテンプレートを記載します。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>はじめてのjQuery</title> </head> <body> <ul> <li><a href="http://www.yahoo.co.jp/">Yahoo</a></li> <li><a href="http://www.google.co.jp/">Google</a></li> <li><a href="http://twitter.com/">Twitter</a></li> </ul> <p>お買い物は<a href="http://www.amazon.co.jp/">Amazon.co.jp</a>で！</p> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script> //ここにプログラムを書きます。 </script> </body> </html>
このフォーマットを前提として話を進めていきますのでプログラム以外の箇所は省略します。Scriptがbody閉じタグ直前にあるのが気になる方はこちらの記事をご覧ください。
CSS操作の基本
まず最初にjQueryを使用してCSS（厳密にはstyle属性）を操作する最もシンプルな例をご覧ください。
$("a").css("color","#f00");
「全てのリンクの色が赤になる」といったプログラムです。
いかがでしょうか。CSSを書いたことがあればすんなりと理解できるのではないでしょうか。
このように、jQueryでCSSを操作するに以下のような書式を用います。
$(“セレクタ”).css(“プロパティ” , “値”)
なお、どうしてこのような記述になるかの説明は割愛します（プログラムの概念を深く理解している必要がある為）。こういうものだと割り切ってください
続いて、「全てのリンクから下線取る」にはどうすれば良いでしょうか？
$("a").css("text-decoration","none");
color～の部分がtext-decoration～に変わっただけです。
他のプロパティを設定する場合も同様です。簡単ですよね。
値を取得する方法
値を設定ではなく取得したい場合もありますよね。その場合は以下のように値を省略することで取得することが可能です。
var cssValue = $("a").css("text-decoration");
プロパティを複数設定するには
では、上記の例題2つの条件を満たすようにはどうすればよいでしょうか？
2つ以上のプロパティを設定するには別の記法を用います。
$("a").css({
"color" : "#f00",
"text-decoration" : "none"
});
2つ以上指定する場合は
$(“セレクタ”).css({ “プロパティ” : “値” , “プロパティ2” : “値2” })
といった書式になります。
また、プロパティが1つの場合でもこの書式が使えます。こんな感じです。
$(“セレクタ”).css({ “プロパティ” : “値” })
この記法をオブジェクトリテラルといいます。興味のある方はこちらの記事をご覧ください。
様々なセレクタが使用可能
では今度はセレクタ部分をより詳細な指定をしてみましょう。
$("li>a[href*=yahoo]").css({
"color" : "#f00",
"text-decoration" : "none"
});
これは「li要素の子要素であるa要素がhref属性に”yahoo”という文字を含む場合」にCSSの変更を適用するというものです。子セレクタや属性セレクタは本来IE6には対応していないのですが、jQueryを使うことで本来対応していないセレクタも使用可能になります。
こんな感じでセレクタ部分には柔軟な指定が可能です。もちろん、idやclassの指定も可能です。また、CSSセレクタだけではなくjQuery独自に実装されたセレクタも存在します。詳細は本家ドキュメントをご覧ください。
使用できないセレクタ
しかし、jQueryでは一部のセレクタが使用できません。「:hover」などがそうでです。
jQueryはあくまでHTMLのstyle属性を操作しているので、style属性に記述できないものはjQueryでも使用できません。
hoverアクションを設定する場合はjQueryのhover()イベントを利用します。こちら関しましては今回は説明を割愛します（別記事にまとめる予定です）。
↓「Web制作に必要なことだけを効率よくしっかり学べる」ということで好評を得ているこの書籍オススメです。「jQueryは勉強したいけどJavaScriptを一から覚えるのはシンドイ」という人は是非！