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

Posted 2020-10-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 属性操作 attr( ) prop（）css( ）区别相关的知识，希望对你有一定的参考价值。

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

谈谈我的总结：

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")//设置固有属性

设置之后div变为

   <div class="cls1 cls2" id="dv" index="1" title="1"></div>

       console.log($("#dv").prop("title"));//输出结果  1
       console.log($("#dv").prop("index"));//输出结果  undefined

二撸一段代码来解释一下

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

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

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"));

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

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

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

html代码

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

这段代码里面并没有设置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"));

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

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

                 复选框
                 复选框
                 true
                 undefined

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

html代码：

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

jquery代码

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

代码执行后：

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

控制台输出：

    undefined
    1

三加点福利吧 css( ）

    jquery代码

        console.log($("#dv").prop("style"));
       console.log($("#dv").attr("style"));
       console.log($("#dv").css("width"));

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

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

控制台输出
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>