关于获取HTML元素属性的prop()和attr()的区别

Posted 2023-04-07

参考技术A 一、对于html元素本身就带有的固有属性，在处理时，使用prop方法。

二、对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

<a href="http://www.baidu.com" target="_self">百度</a> 

href,target是a链接中固有的属性值 用prop()方法获取属性值.

<a href="#" id="desc" action="drop">减少</a> 

href,id是a链接中固有的属性值 ,但是action是自己添加的属性值,所有如过我想获取action的属性值,用attr().

当然固有属性也可以用attr()来获取

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

.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