《小白H5成长之路11》通过jQuery更改元素的css样式

北方的风太大，吹得窗户咚咚作响，小白自从上午用了jQuery事件后，一直沉浸在鼠标控制容器内容的练习里面，周围无论多大的噪音也干扰不了他。中午太阳很好，低头族们又来到小白旁边向阳的窗口扎堆晒太阳。其中一人无意间看到了小白真正摆弄的页面，感到很好奇，说道：“哇！小白，这是你做的么？”

小白得意的说道：“必须的！”

“小白你真了不起，几天不见居然都会高科技了！”，“哇！小白，真佩服你，你居然会写程序！”。。。。。。

正当小白沉浸在赞美声中无法自拔的时候，小白的身旁响起了老朱的声音：“小白！醒醒！今天哥再告你个好玩的知识！”

“好玩的知识？”，小白眼里放出了惊喜的目光。

“对，通过jQuery可以改变元素的css样式，这个好玩吧！你用jQuery实现鼠标移入移出的功能了吧？让我看看”

查看演示及源码页面

“矮油！不错哦～！现在咱把鼠标以上以后的处理改一下，不要更改它的html内容了，变成更改CSS样式。更改CSS样式通过css(样式属性名,样式属性值进行更改，比如更改main里面文本的颜色，我们可以这样写：

1	$("#main").css("color","#F00");

“现在执行我们看一下效果吧”

“这个效果太棒了，可是鼠标移出以后怎么恢复呢？”

“你在移出的代码里面增加一个更改文本颜色就可以了！试试看！”

查看演示及源码页面

“成功了，是不是所有的样式都可以更改？”

“那当然，不过有个知识点你得了解一下，在css里面很多样式属性的默认值是none，比如容器main的border属性设置为none的效果跟没给容器设置border的效果是一样的。具体哪些css样式的属性默认值是none，你可以在一个空网页中写一个div标签，不要给它设置任何css样式，然后通过console.log($('div').css('属性名'))在控制台看看它的默认值。这个工作你有时间了自己测试一下，我就不多说了，现在你做这样一个功能，鼠标移到main容器上时改变容器的高度、背景色、行高、文字大小，移出后恢复原来的状态。”

“好的，我试试！”

二十分钟后小白找到老朱，“做好了！”

查看演示及源码页面

“很好，小白。不过这个方法虽好，可有时需要改变的样式太多，以至于我们会写很多行代码。还有一个方法可以通过添加、删除class或者直接更改容器的class属性值进行设置。添加class使用addClass("类名")，删除class使用removeClass("类名")。我们可以这样来做！”

查看演示及源码页面

“你也可以直接更改div标签上的class属性值，更改属性我近期会跟你说怎么做，你现在会这两种更改样式的方法就可以了。添加和删除class会精简js代码的行数，直接更改css样式的属性值呢又很方便，在真正使用的时候你要学会灵活运用。好了你可以自己练习了～～”