欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

attr()、prop()、css() 的区别

程序员文章站 2022-04-14 23:21:11
.attr( ) 可以设置元素的属性(也就是给元素新增加一个原来并不存在的属性)也可以获取元素的本来就有的属性以及额外设置的属性。如果要获取的属性没有设置,那么获取到的结果是 undefined; .prop( )可以设置元素的属性(HTML固有的属性,可以给元素添加属性)也可以获取元素的固有的属性 ......

.attr( ) 可以设置元素的属性(也就是给元素新增加一个原来并不存在的属性)也可以获取元素的本来就有的属性以及额外设置的属性。如果要获取的属性没有设置,那么获取到的结果是 undefined; 
.prop( )可以设置元素的属性(html固有的属性,可以给元素添加属性)也可以获取元素的固有的属性值,如果是额外设置的其他属性,则无法通过prop( )获取。 

.css() 只能获取是 style 里面的属性值; 
注意语法:获取style样式属性值:.css(style对象.css(“属性名”),设置style样式属性值:对象.css(“属性名”,“属性值”)双引号必不可少

对于html元素本身就带有的固有属性,在处理时,使用prop方法。

对于html元素我们自己自定义的dom属性,在处理时,使用attr方法。

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

获取属性值:

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

总结: 
1 如果想要通过attr()获取属性值,那么该属性必须显式的设置在html代码中或者通过attr新增的属性才能被获取到,如果没有设置,那么将返回undefined 
2 如果通过prop()获取属性值,那么该属性只能是html的固有属性,无论是否显式的设置,都可以获取其对应的属性值,如果是额外增加的属性,那么将无法获取。

 

转载自:https://www.cnblogs.com/lijianda/p/9562064.html