简明现代魔法 -> JQuery -> JQuery 学习:给标签追加 CSS

JQuery 学习:给标签追加 CSS

2010-04-21

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

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

a 是 selector,test 则是 CSS 样式。

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

$(document).ready(function(){
	$("#nowamagic").addClass("addCss"); 
}); 

效果演示

我是 id 为 nowamagic 的元素,我被 JQuery 弄成红色了!
我是 id 为 nowamagic2 的元素,我被 JQuery 弄成微软雅黑字体了,而且还变成18px字体了!
我是 id 为 nowamagic3 的元素,点一下我看看?

code 如下:

<style>
.addCss { color:red; }
.addCss_2 { font-family:微软雅黑; font-size:18px; }
</style>

<script language="javascript">
$(document).ready(function(){
	$("#nowamagic").addClass("addCss"); 
}); 
</script>
  
  <div id="nowamagic">我是 id 为 nowamagic 的元素,我被 JQuery 弄成红色了!</div>
  
<script language="javascript">
$(document).ready(function(){
	$("#nowamagic2").addClass("addCss_2"); 
}); 
</script>
  
  <div id="nowamagic2">我是 id 为 nowamagic2 的元素,我被 JQuery 弄成微软雅黑字体了,而且还变成18px字体了!</div>
  
<script language="javascript">
$(document).ready(function(){
	$("#nowamagic3").click(function(){
		$("#nowamagic3").addClass("addCss"); })
}); 
</script>

<div id="nowamagic3" style="cursor:pointer;">我是 id 为 nowamagic3 的元素,点一下我看看?</div>
随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们