2010/08/17

[jQuery]classの追加と削除

ある特定の要素にクラスの追加、削除をするのは、いたって簡単。
jQuery日本語リファレンスのaddClass

jQuery日本語リファレンスのremoveClass
を参考に、まずは、クラスを追加するプログラムを作ってみる。

<html>
<head>
<title>Jquery.addClass、removeClassテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
<style type="text/css">
.foo{color:red;}

</style>
</head>
<body>
<div>apple</div>

<input type="button"
value="Run"
id="hoge"
>

<script
type="text/javascript"
>

$("#hoge").bind(
'click'
, function(){
$("div").addClass("foo");
}
);
</script>
</body>
</html>

こいつを実行すると、fooクラスが適用されます。
(文字が赤くなります。)

一方で、クラスの削除はこのようになります。
<html>
<head>
<title>Jquery.addClass、removeClassテスト</title>
<script type="text/javascript"
src="./jquery-1.4.2.min.js"
></script>
<style type="text/css">
.foo{color:red;}

</style>
</head>
<body>
<div class="foo">apple</div>

<input type="button"
value="Run"
id="hoge"
>

<script
type="text/javascript"
>

$("#hoge").bind(
'click'
, function(){
$("div").removeClass("foo");
}
);
</script>
</body>
</html>

これを実行すると、元々赤文字だったappleがクラスが削除されることによって黒文字に変更されます。

今回もわりと簡単だったなー。

0 コメント:

コメントを投稿