关于jquery里面prop和attr的带示例详细对比，深度理解

最新推荐文章于 2022-08-02 05:00:00 发布

fictiongrace

最新推荐文章于 2022-08-02 05:00:00 发布

阅读量247

点赞数 2

分类专栏：技术学习前端

本文链接：https://blog.csdn.net/fictiongrace/article/details/77846989

版权

技术学习前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

以前经常把attr和prop搞混，由于它们在许多场景用法其实是一样的，因此也没有出现大的差错。直到最近，写项目被一个bug困扰很久，才意识到attr和prop的区别。

这里整理一下异同点。

这里我写了一个简单的demo设置了一些不同的属性在div上

<style>
        .hes{
            height: 200px;
        }
        .left{
            float: left;
        }
    </style>
</head>
<body>
<div id="no1" data-person="小明" data-id="testA" style="display: inline-block;border: 1px solid #ddd;" class="hes left">text</div>
</body>

大家看到了这个div上有我设置的各种属性，下面我把它放到浏览器上执行一下。

先对比class

这里可以看到class 两个属性获取的是完全一样的。

接着对比 data-person和data-id

这里我们就可以发现，prop在获取元素自定义属性的时候获取不到了，但是attr能够获取到。

接下来对比style

很明显attr只是获取属性等号后面的值，而prop则是深度全面的获取style在这个标签上的详细信息，但是并不包括前置style表中通过.hes 和 .left 赋予的style属性。

我们可以看到，虽然在前置style里设置了

<style>
        .hes{
            height: 200px;
        }
        .left{
            float: left;
        }
    </style>

但是我们我们再console里看到的依然是

当我们对比attr无法获取的属性时，我们用另一个例子来比较

<input id="check1" type="checkbox" checked>
<input id="check2" type="checkbox">

这里就可以发现在这当标签中没有checked 属性时attr 是获取不到的，而当有checked属性时 attr获取的值是“checked”而非true，其实等同于checked="checked"获取到的值。

而prop则是全部都按照true和false来判断

经过上述这些，我们来个总结会发现

prop获取到的是标签的固有属性，本身就有的属性，并且获取到的信息更深层次，例如：checked和style为例。

attr获取到的是标签定义属性（注意：固有属性只要在标签中写了，也算是被定义可当做定义属性），获取到的值一般是等号后面所对应的值，更为直观。即使没有等号，入checked这种情况，也默认为checked="checked"

fictiongrace

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
关于jquery里面prop和attr的带示例详细对比，深度理解

以前经常把attr和prop搞混，由于它们在许多场景用法其实是一样的，因此也没有出现大的差错。直到最近，写项目被一个bug困扰很久，才意识到attr和prop的区别。这里整理一下异同点。这里我写了一个简单的demo设置了一些不同的属性在div上 .hes{ height: 200px; } .left{
复制链接

扫一扫

专栏目录