请教JQ中attr()和css()的区别?我老是分不清楚-问答-阿里云开发者社区-阿里云

开发者社区> 杨冬芳> 正文

请教JQ中attr()和css()的区别?我老是分不清楚

2016-06-07 16:23:58 2294 1

JQ中css()可以修改html中的文字颜色 字体,attr()也可以吗?还是他只可以修改特定元

attr可以修改html标签上展示为xxx=""任意属性值,css只能修改属性名为style的值,也就是style=""里面的值

不太严格地说:

1.attr()是操作元素的属性。

2.css()是操作元素的style属性。

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

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

jQuery中
css()方法是获取/修改样式属性(和style有关)的
attr()是获取/修改元素的属性(和Html标签有关)的,比如下面的:
Html

Hello

Javascript

//css()

var color = $("#a").css("color"); //只有一个参数时,是获取div#a的color,返回red

           $("#a").css("color","blue"); //两个参数时,是设置对应的 样式属性,这里是这只文本color为blue
          // $("#a").css({"color":"blue","fontWeight":"normal"});//也支持对象形式进行设置样式
          

//attr()
var id = $("#a").attr("data-id"); //获取div#a 上面的data-id属性的值;当然,style,class,id这三个都可以获取到,因为这些都是Html元素的 属性

          //$("#a").attr("data-id",2);//设置div#a上面的data-id属性为2,假如是一个不存在的属性,使用这个代码,就会添加这个属性到匹配到的元素上面 ,如$("#a").attr("data-width","100px");,使用这个,div#aHtml元素上面就会新增一个data-width的属性            

});

attr函数是获取或修改属性
任何写作HTML标签里的属性都可以获取或修改,包括你自定义的属性,比如


不能修改样式
比如img标签的src属性等
css函数是修改其样式,不过即便style里是12px的大小,css函数也可以改变为14或其他
可以理解为css函数直接操作的是style里的样式

简单的说,如果你要设置一个元素的 style="display:none",那么 .css 你要这样写:

$('#elem').css('display', 'none');
// 约等于
document.getElementById('elem').style.display = 'none';

使用 attr 你就得这样写:

var elem = $('#elem');
style = elem.attr('style') || '';
elem.attr('style', style + ';display:none;');
// 约等于
var elem = document.getElementById('elem'),
style = elem.cssText || '';
elem.cssText += ';display:none;';

.attr('style') 得到的是字符串,而 .css 操作的是对象

取消 提交回答
全部回答(1)
  • 西秦说云
    2019-07-17 19:30:26

    attr可以修改html标签上展示为xxx=""任意属性值,css只能修改属性名为style的值,也就是style=""里面的值

    0 0
相关问答

11

回答

在阿里云上安装和运行Node.js全功略

ycwong 2013-09-18 15:17:30 64039浏览量 回答数 11

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 56737浏览量 回答数 19

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 157103浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 92927浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 146804浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 145641浏览量 回答数 31

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 85196浏览量 回答数 23

249

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 302626浏览量 回答数 249

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80132浏览量 回答数 13

14

回答

对象存储oss【问答合集】

我是管理员 2018-08-03 14:54:02 67380浏览量 回答数 14
+关注
杨冬芳
IT从业
1
文章
9167
问答
推荐问答
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载