iPentec.com / Doc / JavaScript / jQuery

1 概要
2 書式
3 書式例
- 3.1 例:Pタグのフォントカラーを青にする場合
- 3.2 例:heavyクラスのフォントをボールドにする場合
4 例
- 4.1 コード
- 4.2 解説
  - 4.2.1 セレクタ(要素の選択)
- 4.3 スタイルの変更
- 4.4 実行結果
5 補足:正しく動作しないコード
6 修正コード
7 参考ページ

jQuery のセレクタを用いて要素のスタイルを変更する - jQuery

jQuery のセレクタを用いて要素のスタイルを変更するコードを紹介します。

補足

jQueryを利用せずに同様の実装をする場合は、querySelector, querySelectorAllメソッドを利用します。詳細はこちらの記事を参照してください。

概要

jQuery のセレクタを用いて要素のスタイルを設定する場合は、選択されたオブジェクトのcss()メソッドを呼び出します。

書式

スタイルの変更はセレクタにより取得されたオブジェクトの.cssメソッドで変更できます。書式は以下になります。

(選択オブジェクト).css("CSSのプロパティ名", "CSSの値");

jquery([セレクタ要素]).css("設定するCSS要素","設定値")

$([セレクタ要素]).css("設定するCSS要素","設定値")

書式例

例:Pタグのフォントカラーを青にする場合

$(p).css("color","#0000FF");

例:heavyクラスのフォントをボールドにする場合

$(.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");

のコードであるため。pタグのフォントカラーを青にし、aタグのフォントカラーを緑にし、アンダーラインを非表示にしています。

実行結果

上記の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のコードを実行する (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

著者

ジョニー

iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。

目次