×

attr()与css()有何区别和应用

作者:Terry2019.12.16来源:Web前端之家浏览:10823评论:0
关键词:jscssattr

jquery中attr()和css()都是用于获取/修改元素的属性,那么我们在使用jq的css与attr两个函数会不会经常搞混淆呢?

jquery attr()方法

attr() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值,则返回第一个匹配元素的值。

当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。

语法

返回属性的值:

$(selector).attr(attribute)

设置属性和值:

$(selector).attr(attribute,value)

attribute:规定属性的名称。

value:规定属性的值。

function(index,currentvalue):规定要返回属性值到集合的函数。其中两个参数:

index - 接受集合中元素的 index 位置。

currentvalue - 接受被选元素的当前属性值。 

jquery css()方法

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

返回第一个匹配元素的 CSS 属性值。

注释:当用于返回一个值时,不支持简写的 CSS 属性(比如 "background" 和 "border")。

$(selector).css(name)

name:必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。

jquery中attr()与css()的区别

jquery中attr()是获取/修改元素的属性和值(和Html标签有关);css()是获取/修改元素的样式属性(和style有关)。

attr()用于设置标签的属性,比如src,href,title

而css()仅仅可以用在设置style中的属性,这是二者的根本区别。

前者可以修改<img>的src属性,可以修改<a>的href属性, 可以修改<input>的title属性。然而后者却不行,他它只能修改样式相关的特征。

所以,后者是前者的子集,只是对 style这个特定的属性进行操作。

示例:

HTML

<div style="color:red;font-weight:bold;" id="a" data-id="1" class="mystyle">Hello</div>

Javascript

<script type="text/javascript">
	$(function() {
		//css()
		var color = $("#a").css("color"); //只有一个参数时,是获取div#a的color,返回red
		$("#a").css("color", "blue"); //两个参数时,是设置对应的 样式属性,这里是这只文本color为blue
		// $("#a").css({"color":"blue","fontWeight":"normal"});//也支持对象形式进行设置样式

		//attr()

		//获取div#a上面的data-id属性的值;当然,style,class,id这三个都可以获取到,因为这些都是Html元素的 属性
		var id = $("#a").attr("data-id");
		//$("#a").attr("data-id",2);//设置div#a上面的data-id属性为2,
                //假如是一个不存在的属性,使用这个代码,就会添加这个属性到匹配到的元素上面 
               //如$("#a").attr("data-width","100px");,使用这个,div#aHtml元素上面就会新增一个data-width的属性
	});
</script>

总结

  • css()方法是获取/修改样式属性(和style有关)的方法;

  • attr()是获取/修改元素的属性(和Html标签有关)的方法;

  • attr()和css()对style的操作都是针对行内样式。

  • style也是元素的属性,attr()同样可以对他进行操作,所以在功能上css()可以看成是attr()的子集。

  • attr()操作返回的是string,css()操作返回的是object。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js829304809238409.html

网友评论文明上网理性发言 已有0人参与

发表评论: