js设置，获取，删除属性(setAttribute, getAttribute, removeAttribute)

DOM操作：设置、获取、删除属性

最新推荐文章于 2025-05-24 23:52:24 发布

原创最新推荐文章于 2025-05-24 23:52:24 发布 · 3.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js设置属性 #setAttribute #getAttribute #removeAttribute #设置

web前端基础同时被 2 个专栏收录

38 篇文章

订阅专栏

每周学习

22 篇文章

订阅专栏

本文介绍如何使用JavaScript通过setAttribute(), getAttribute(), 和 removeAttribute() 方法来设置、获取和删除HTML元素的属性。通过示例展示了如何对input元素进行属性的设置、查询和删除操作。

设置，获取，删除属性

setAttribute()

setAttribute() 方法添加指定的属性，并为其赋指定的值。

如果这个指定的属性已存在，则仅设置/更改值。

getAttribute()

getAttribute() 方法返回指定属性名的属性值。

removeAttribute()

removeAttribute() 方法删除指定的属性。

<body>
    <div>
        <input value="3652">
        <input type="button" onClick="setClick()" value="点击设置">
        <input type="button" onClick="getClick()" value="点击查询">
        <input type="button" onClick="deleteClick()" value="点击删除">
    </div>
</body>
</html>
<script>
    var input = document.getElementsByTagName("input")[0];

    // setAttribute 设置input的type为file
    function setClick(){
        input.setAttribute("type","file")
    }

    // getAttribute 输出input的type
    function getClick(){
        console.log(input.getAttribute("type"));
    }

    //removeAttribute 删除input的value值
    function deleteClick(){
        input.removeAttribute("value")
    }
</script>