jQuery中attr与prop

篆愁君的烦恼

已于 2022-05-14 13:56:15 修改

阅读量937

点赞数

分类专栏：前端jqery 文章标签： jquery javascript 前端

于 2022-05-14 13:53:08 首次发布

本文链接：https://blog.youkuaiyun.com/m0_52228992/article/details/124767042

版权

前端jqery 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了jQuery中attr与prop方法的区别，attr主要用于设置HTML属性，而prop用于DOM属性。通过示例展示了attr在设置CSS属性如height时无效，而prop在设置img的width时能生效。当CSS属性与行内属性冲突时，CSS属性具有更高优先级。文章建议在处理DOM属性时优先考虑使用prop。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

attr与prop非常相似，均可访问元素的属性值和设置属性值，但prop多用于设置（访问）DOM属性，attr没有限制,HTML、DOM均可

语法：

获取属性值：元素.attr("属性") 或者元素.prop("属性")

设置属性值：元素.attr("属性","属性值") 或者元素.prop("属性","属性值")

设置多个属性值：元素.attr("属性1"："属性值"，"属性2"："属性值"...) 或者元素.prop("属性1"："属性值"，"属性2"："属性值"...)

设置获取属性时，需要注意的是，这里的属性必须能够直接在html标签内写出，类似（<img src"XXX" width="100px">），这里的width可以访问并设置，而类似（<div width="100px"></div>），他这个就没有这种语法，所以设置根本没用，正确语法是（

<div style="height: 100px">

）但是这种无法由attr或是prop访问

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        width: 400px;
        /*height: 100px;*/
        background-color: greenyellow;
    }
</style>
<body>
<script src="../lib/jquery-1.12.4.js"></script>
<div id="d1">
    我是div
</div>
<script>
    $(function () {
        $("div").click(function () {
            $("div").attr("height","200");
        });
    })
</script>
</body>
</html>

运行结果：

点击后可以发现，没有变化，检查元素可以发现代码出现变化

虽然出现height属性,但是没有影响页面元素

下面换一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*img{*/
    /*    width: 300px;*/
    /*    height: 300px;*/
    /*}*/
</style>
<body>
<script src="../lib/jquery-1.12.4.js"></script>
<img src="../img/img1.png" width="100px" height="100px">
<script>
    $(function () {
        $("img").click(function () {
            $("img").attr("width","200");
        })
    })
</script>
</body>
</html>

运行结果：

点击后：

可以明显发现图片变化了，这时打开检查元素

明显发现width变成200px，改变成功

但当我们将上面css属性的注释放开

img{
    width: 300px;
    height: 300px;
}

，会发现图片会按css属性，这是因为它的优先级比行内的大，并且点击后图片也没有变化，因为这里面的修改都是改变行内属性，改变不了css。

由于dom属性和html属性很多重名，比较难以区分，而prop与attr相似，推荐使用attr

参考：

jQuery attr() 方法 | 菜鸟教程与jQuery prop() 方法 | 菜鸟教程

jQuery中attr与prop

attr与prop非常相似，均可访问元素的属性值和设置属性值，但prop多用于设置（访问）DOM属性，attr没有限制,HTML、DOM均可

语法：

获取属性值：元素.attr("属性") 或者 元素.prop("属性")

设置属性值：元素.attr("属性","属性值") 或者 元素.prop("属性","属性值")

获取属性值：元素.attr("属性") 或者元素.prop("属性")

设置属性值：元素.attr("属性","属性值") 或者元素.prop("属性","属性值")