jQueryを利用せずに同様の実装をする場合は、querySelector, querySelectorAllメソッドを利用します。
詳細はこちらの記事を参照してください。
jQuery のセレクタを用いて要素のスタイルを変更するコードと実行結果を紹介します。
jQuery のセレクタを用いて要素のスタイルを設定する場合は、選択されたオブジェクトのcss()メソッドを呼び出します。
スタイルの変更はセレクタにより取得されたオブジェクトの.cssメソッドで変更できます。書式は以下になります。
(選択オブジェクト).css("CSSのプロパティ名", "CSSの値");
jquery([セレクタ要素]).css("設定するCSS要素","設定値")
$([セレクタ要素]).css("設定するCSS要素","設定値")
$(p).css("color","#0000FF");
$(.heavy).css("font-weight","900");
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p").css("color", "blue");
$("a").css("color", "green");
$("a").css("text-decoration", "none");
})
</script>
</head>
<body>
<p>テストページ</p>
<a href="http://www.ipentec.com">リンク1</a><br/>
<a href="http://www.ipentec.com">リンク2</a><br />
<a href="http://www.ipentec.com">リンク3</a><br />
</body>
</html>
jQueryのセレクタは
jquery([セレクタ要素])
$([セレクタ要素])
の書式で記述できます。セレクタの詳細はこちらの記事を参照してください。
今回のコードでは
$("p").css("color", "blue");
$("a").css("color", "green");
$("a").css("text-decoration", "none");
上記のHTMLファイルを表示すると下図の結果が得られます。pタグの部分は青色に代わり、リンクは緑色の文字列になりアンダーラインがなくなっています。
正しく動作しないコードを紹介します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$("p").css("color", "blue");
$("a").css("color", "green");
$("a").css("text-decoration", "none");
</script>
</head>
<body>
<p>テストページ</p>
<a href="http://www.ipentec.com">リンク1</a><br/>
<a href="http://www.ipentec.com">リンク2</a><br />
<a href="http://www.ipentec.com">リンク3</a><br />
</body>
</html>
上記のコードではスタイルは反映されません。原因はページがすべて読み込まれる前にJavaScirptが実行されてしまうためタグにスタイルが反映されないためです。
下記のコードは正しく動作します。
ページの上部からコードが実行されていくため、反映されるタグより下部にjavascriptコードが記述されていればスタイルは反映されます。最初に紹介したコードは、ready()関数のイベントとして記述しているためページがすべて読み込まれたのちにコードが実行されるためhead部分にjavascriptを記述していてもスタイルは反映されます。
Head部分にJavaScriptのコードを記述したい場合は、明示的にページロード時にコードを実行することでスタイルの反映ができます。jQueryでページロード時にコードを実行する方法は「jQuery でページ表示時にjavascriptを実行するコードと実行結果」を参照してください。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
</head>
<body>
<p>テストページ</p>
<a href="http://www.ipentec.com">リンク1</a><br/>
<a href="http://www.ipentec.com">リンク2</a><br />
<a href="http://www.ipentec.com">リンク3</a><br />
<script type="text/javascript">
$("p").css("color", "blue");
$("a").css("color", "green");
$("a").css("text-decoration", "none");
</script>
</body>
</html>
http://ascii.jp/elem/000/000/498/498710/index-2.html
