JQuery 学习：给标签追加 CSS
时间：2013-08-12 13:22 来源：互联网 作者：源码搜藏 收藏
今天我们要做的事情是，增加或移除元素的css class，例如： 1 $( "a" ).addClass( "test" ); 2 $( "a" ).removeClass( "test" ); a 是 selector，test 则是 CSS 样式。 比如以下代码，可以将 id 为 nowamagic 的 HTML 元素加上名为 addCss 的样式。 1 $(docu
今天我们要做的事情是，增加或移除元素的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 如下：
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>
|
上一篇：JQuery Ajax 全解析
下一篇：JQuery选择器是如何工作的
jQuery技术阅读排行
-
2013-08-12
-
2013-04-09
-
2013-05-13
-
2013-08-12
-
2013-08-12
-
2013-08-12
-
2013-04-09
-
2013-08-12
最新文章
-
2013-08-12
-
2013-08-12
-
2013-08-12
-
2013-08-12
-
2013-08-12
-
2013-08-12
-
2013-08-12
-
2013-08-12
热门源码
