简明现代魔法 -> 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 的元素，我被 JQuery 弄成红色了！</div> <script language="javascript"> $(document).ready(function(){ $("#nowamagic2").addClass("addCss_2"); }); </script> <div>我是 id 为 nowamagic2 的元素，我被 JQuery 弄成微软雅黑字体了,而且还变成18px字体了！</div> <script language="javascript"> $(document).ready(function(){ $("#nowamagic3").click(function(){ $("#nowamagic3").addClass("addCss"); }) }); </script> <div>我是 id 为 nowamagic3 的元素，点一下我看看？</div>