JQuery中css与attr的比较

我们在使用jq的css与attr两个函数会不会经常搞混淆呢，下面就我就谈谈我在使用两者的经验。

$(‘#boj’).attr(‘src’,’/image/aa.jpg’)这样不禁让我们很困惑，是不是attr可以设置对象的属性height,width等呢？答案是不可能的。

attr是设置和获取属性值的，比如现在有一个div，内容如下：

<div id=’test’ style=’width:600px;height:200px’><ul><li class=’apple’>苹果</li><li class=’bana’>香蕉</li><li class=’grape’>葡萄</li><li class=’orange’>橘子</li></ul></div>

使用$(‘#test’).attr(‘background’,’red’)，然而div中背景色并没有设置成为红色，在调试窗口中显示是这样的

看样式并没有写进style里面，所以看起来没有任何效果。不过我们可以这么想，既然能单独设置属性，那我们就可以通过赋值，直接写进属性里，然后再取值。OK，那我们就来取刚才设置的background属性值。

var attribute=$(‘#test’).attr(‘background’);alert(attribute)

js中相当于

var attribute=document.getElementById(‘test’)attribute.setAttribute(‘background’,’red’)attribute.getAttribute(‘background’)

删除属性：

attribute.removeAttr(‘background’)

显示结果：

以后我们需要添加属性设置属性可以这样来。好了，我们现在知道attr的用法了。下面就来谈谈css的用法：
css是用来设置和获取style的.
设置css样式

var myStyle=$(‘#test’);myStyle.css(‘background’,’red’)

当然我们可以设置很多的样式，例如：

myStyle.css({‘background’:’red’,’title’:’my‘})

获取css样式

var bg=myStyle.css(‘background’);

这里我就多说一句，鼠标移入移出可以进行使用hover来进行实现，例如：

$(‘#test’).hover(function(){$(this).css(‘background’,’green’)},function(){$(this).css(‘background’,’red’)})

js原始获取如下：

var myStyle=document.getElementById(‘test’);

设置样式：

myStyle.style.backgroundColor=’red’;

获取样式：

Var bg=myStyle.style.backgroundColor;

效果如下：