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

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