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

时间：2021-06-13 21:30:48

一 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
我是一个div
CSSStyleDeclaration {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

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

相关文章