JQuery 学习：给标签追加 CSS

今天我们要做的事情是，增加或移除元素的css class，例如：

1	$("a").addClass("test");

2	$("a").removeClass("test");

a 是 selector，test 则是 CSS 样式。

比如以下代码，可以将 id 为 nowamagic 的 HTML 元素加上名为 addCss 的样式。

1	$(document).ready(function(){

2	$("#nowamagic").addClass("addCss");

3

});

效果演示

我是 id 为 nowamagic 的元素，我被 JQuery 弄成红色了！

我是 id 为 nowamagic2 的元素，我被 JQuery 弄成微软雅黑字体了,而且还变成18px字体了！

我是 id 为 nowamagic3 的元素，点一下我看看？

code 如下：

view source print ?

01

<style>

02	.addCss { color:red; }

03	.addCss_2 { font-family:微软雅黑; font-size:18px; }

04

</style>

05

06	<script language="javascript">

07	$(document).ready(function(){

08	$("#nowamagic").addClass("addCss");

09

});

10

</script>

11

12	<div id="nowamagic">我是 id 为 nowamagic 的元素，我被 JQuery 弄成红色了！</div>

13

14	<script language="javascript">

15	$(document).ready(function(){

16	$("#nowamagic2").addClass("addCss_2");

17

});

18

</script>

19

20	<div id="nowamagic2">我是 id 为 nowamagic2 的元素，我被 JQuery 弄成微软雅黑字体了,而且还变成18px字体了！</div>

21

22	<script language="javascript">

23	$(document).ready(function(){

24	$("#nowamagic3").click(function(){

25	$("#nowamagic3").addClass("addCss"); })

26

});

27

</script>

28

29	<div id="nowamagic3" style="cursor:pointer;">我是 id 为 nowamagic3 的元素，点一下我看看？</div>