スポンサーサイト





上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

  • Comments (Close): -
  • TrackBack (Close): -

CSSを操作してみる

  • Posted by: javascriptmania
  • 2011-05-12 Thu 23:06:35
  • jQuery




jQueryを使ってCSSを操作してみましょう。

jQueryを使う前のJSSample.html :
<html>

<head>

<style type="text/css">
<!--

h1 {
color: blue;
}

-->
</style>


</head>

<body>

<h1>Hello</h1>

</body>

</html>


上のサンプルコードでは、ヘッダーでCSSを設定しています。h1の要素について、文字色が青です。

実行結果 :
20110514_1

次に、jQueryでh1要素を赤にしてみましょう。

<html>

<head>

<style type="text/css">
<!--

h1 {
color: blue;
}

-->
</style>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("jquery", "1");
google.setOnLoadCallback(function() {
$(function() {
$('h1').css('color', 'Red');
});

});

</script>

</head>

<body>

<h1>Hello</h1>

</body>

</html>


実行結果 :
20110514_2

ready()関数

$(function() { });

を使っているので、ページ読み込みの際にjQueryが実行されます。

CSSを操作するjQueryの命令の書式 :

$('セレクタ').css('属性名', '属性値');



セレクタは、操作したい要素です。セレクタにつき、CSS関数を使うとCSSの変更ができます。

CSS関数があれば HTML関数もあり、h1要素の値を "Hello" から "Hi!" に変更するときは、

$('h1').html('Hi!');

と書きます。



関連記事

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://javascriptmania.blog111.fc2.com/tb.php/38-0dd98e8f
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。