jquery 属性操作 attr( ) prop（）css( ）区别

一 attr () 和 prop( ) 操作属性

谈谈我的总结：

• 1
• 2

1 属性的定义，根据W3C手册所述：属性包括，标准属性：id class style title 语言属性 lang dir以及某些特定的元素的固有的属性，比如 a 的 href target 属性，input元素的 radio checked type alt src disabled value 等 ，img标签的width height src alt 等，不存在的属性叫做新增属性。 
2 attr( ) 可以设置元素的属性（也就是给元素新增加一个原来并不存在的属性）也可以获取元素的本来就有的属性以及额外设置的属性。如果要获取的属性没有设置，那么获取到的结果是 undefined; 
3 prop( )可以设置元素的属性（HTML固有的属性，可以给元素添加属性）也可以获取元素的固有的属性值，如果是额外设置的其他属性，则无法通过prop（ ）获取。 
4 设置元素属性： 
attr （“属性名”，“属性值”） 既可以设置元素固有的属性，也可以设置元素本来不存在的属性，比如attr（）可以给下面代码div行设置固有的HTML属性，包括 ttle id class 等，也可以设置原先不存在的属性，也就是造一个新的属性，比如 index aaa 等，任何都行；而 prop( “属性名”，“属性值”)只能设置固有的HTML属性。 
获取元素属性值： 
attr(“属性值“）只能获取已经设置在元素身体上的属性值，包括固有属性和新增属性，没有设置的属性将无法获取到值，结果全部是undefined; 
prop(“属性值”） 只能获取固有属性的属性值，新增属性的属性值无法被获取到。先解释这段话的意思，看这段代码：

 ???<div class="cls1 cls2" id="dv"></div> ??????$("#dv").attr("index","1")//设置新增属性 ??????$("#dv").attr("title","1")//设置固有属性

• 1
• 2
• 3
• 4
• 5

设置之后div变为

 ??<div class="cls1 cls2" id="dv" index="1" title="1"></div> ??????console.log($("#dv").prop("title"));//输出结果 ?1 ??????console.log($("#dv").prop("index"));//输出结果 ?undefined

• 1
• 2
• 3
• 4
• 5

二 撸一段代码来解释一下

A 对于固有的HTML属性 
html代码

 ???<div class="cls1 cls2" id="dv" title="我是一个div"></div>

• 1
• 2

jquery代码（输出html代码里面有的属性，attr只能获取class id title ，prop可以获取没有设置的属性 比如style）

 ??????console.log($("#dv").prop("title")); ??????console.log($("#dv").attr("title")); ??????console.log($("#dv").prop("style")); ??????console.log($("#dv").attr("style"));

• 1
• 2
• 3
• 4
• 5
• 6

控制台输出 
(可以获取HTML固有的属性值）

我是一个div我是一个divCSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: ""…}undefined

• 1
• 2
• 3
• 4
• 5

由此可见，1 对于固有的HTMl属性，如果在元素中设置了，那么attr 和 prop 都可以获取的到 
2 对于固有的HTMl属性，如果在元素中没有设置，那么 attr 获取的结果是undefined 而prop可以获取那个属性的值。 
在来看一个简单的例子

html代码

 ???<input type="checkbox" value="复选框" id="chk"/>这是一个复选框

• 1
• 2

这段代码里面并没有设置checked属性值（checked 属性对应值有两个 true false）

jquery代码（输出html代码里面有的属性，attr只能获取type value id，prop可以获取没有设置的属性 比如checked ）

 ??????console.log($("#chk").prop("value")); ??????console.log($("#chk").attr("value")); ??????console.log($("#chk").prop("checked")); ??????console.log($("#chk").attr("checked"));

• 1
• 2
• 3
• 4
• 5
• 6

输出结果： 
点击复选框之前输出如下：

 ???????????????????复选框 ???????????????????复选框 ???????????????????false ???????????????????undefined

• 1
• 2
• 3
• 4
• 5

点击复选框之后输出如下：

 ????????????????复选框 ????????????????复选框 ????????????????true ????????????????undefined

• 1
• 2
• 3
• 4
• 5

总结： 
1 如果想要通过attr()获取属性值，那么该属性必须显式的设置在HTML代码中或者通过attr新增的属性才能被获取到，如果没有设置，那么将返回undefined 
2 如果通过prop（）获取属性值，那么该属性只能是HTMl的固有属性，无论是否显式的设置，都可以获取其对应的属性值，如果是额外增加的属性，那么将无法获取。下面来说这个问题

html代码：

 ???????<div class="cls1 cls2" id="dv" title="我是一个div"></div>

• 1
• 2

jquery代码

 ??????$("#dv").attr("index","1")//通过attr给元素设置新的属性，W3C原来不存在的属性 ??????console.log($("#dv").prop("index")); ??????console.log($("#dv").attr("index"));

• 1
• 2
• 3
• 4

代码执行后：

<div class="cls1 cls2" id="dv" title="我是一个div" index="1"></div>

• 1
• 2

控制台输出：

 ???undefined ???1

• 1
• 2
• 3

三 加点福利吧 css( ）

 ???jquery代码 ???????console.log($("#dv").prop("style")); ??????console.log($("#dv").attr("style")); ??????console.log($("#dv").css("width"));

• 1
• 2
• 3
• 4
• 5
• 6

给div添加一些样式，无论该样式是内嵌式 
html代码：

 ???<div class="cls1 cls2" id="dv" title="我是一个div" style="width:100px;height: 50px;"></div>

• 1
• 2

控制台输出 
CSSStyleDeclaration {0: “width”, 1: “height”, 2: “background-color”, alignContent: “”, alignItems: “”, alignSelf: “”, alignmentBaseline: “”, all: “”…} 
width:100px;height: 50px; 
100px

或者内联式 ???<style> ???????.cls1 { ???????????width: 100px; ???????????height: 50px; ???????????background-color: pink; ???????} ???</style> ???div class="cls1 cls2" id="dv" title="我是一个div"></div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

控制台输出 ：

CSSStyleDeclaration {alignContent: “”, alignItems: “”, alignSelf: “”, alignmentBaseline: “”, all: “”…} 
undefined 
100px

小结：注意区分，属性 和 样式属性 平常说的属性包括id class style lang dir title等，然后注意样式属性指的是设置在 style 属性里面或者 style 标签里面的 ，不要搞混.css() 只能获取是 style 里面的属性值； 
注意语法：获取style样式属性值：对象.css(“属性名”），设置style样式属性值：对象.css(“属性名”，“属性值”）双引号必不可少

四 在DOM中获取元素属性的文章可参阅 http://blog.csdn.net/qq_35809245/article/details/54146996

五 欢迎阅读，你辣么美丽和勤奋，祝你开心！