jQuery——attr和css的区别

在jquery中，attr和css都和元素样式有关，今天来说一说这两者有什么区别。

css() 方法返回或设置匹配的元素的一个或多个样式属性。

attr即[attribute]的缩写，它是选择器用于选取带有指定属性的元素。

其实，它们之间的区别可以用一句话来概括：即attr设置和获取某个属性值,css设置和获取style中的属性。

下面用代码来说明一下这两者之间的区别。

1.作用不同

<a href="#" id="link">这是一个JQ示例</a>

<script>

$("#link").css("display","none")

$("#link").attr("title","JQ添加的title")

</script>

上文中的代码，通过css将link的display设置为了none；通过attr为link添加了一个title属性，其值为“JQ添加的title”。

 

这种使用方法正好验证了上文所说的“attr——属性、css——style”的联系。

2.优先级不同

jquery中的css()是用来操纵style{}的，而attr()是加在标签内部的，attr()的权重比css()要大，它会覆盖css()的样式。

3.获取权限不同

在jquery里，css可取该标签定义的css的属性，attr只能取该标签里自带的属性。

也就是说，如果直接在div中定义的属性，css无法获得。attr可以获得css中的也可以获得其他标签里自带的属性，而标签里没有自带的属性，attr也无法获得。

例如：在div里，没有width这个属性，所以不能用attr给他赋值，在div的css样式里是有width这个属性的，所以可以用$("#logo").css("width","180")来赋值。

如果想要动态地增加属性，可以使用addClass（）。它是为html元素动态的添加class。