js setattribute 是原生 DOM 提供的方法，作用是给页面 HTML 元素新增或者修改标签属性，语法是元素对象 setAttribute 属性名 属性值，所有属性值都会以字符串形式保存，它和直接用点语法修改元素属性存在区别，很多新手容易混淆这两种写法，理解这个方法之后，动态修改 id class data 自定义属性 disabled 这类标签属性就会非常方便，也是原生 JS 项目里面高频使用的 DOM 操作 API。之所以会设计 setattribute 这个方法，是因为 HTML 标签属性属于节点属性，点语法只能修改部分内置 DOM 对象属性，自定义 data 属性还有部分特殊属性，使用 setattribute 会更加规范，它会直接写入 HTML 标签上，和源码标签属性保持同一套属性体系。使用的时候第一步先通过选择器获取 DOM 元素对象，第二步调用 setattribute，第一个参数填写属性名称，第二个参数填写属性值，第三步如果属性原本已经存在，调用之后会直接覆盖原有值，如果属性不存在就会新增这个属性，第四步如果需要读取属性就搭配 getAttribute，删除属性使用 removeAttribute。总结来说 js setattribute 核心就是操作 HTML 标签属性，所有传入的值都会转为字符串，适合动态修改标签原生属性和自定义属性。

一 基础语法

element setAttribute attrName attrValue

element 已经获取到的 DOM 元素对象

attrName 属性名称，推荐使用小写，部分浏览器对大小写比较敏感

attrValue 属性值，必须转为字符串，数字布尔值都会自动转换成字符串

二 基础示例

获取元素之后修改 class

var box = document getElementById box

box setAttribute class active

新增自定义 data 属性

box setAttribute data id 1001

修改 disabled 属性

btn setAttribute disabled true

三 配套相关方法清单

getAttribute 获取元素指定属性的值

removeAttribute 删除元素指定属性

hasAttribute 判断元素是否拥有该属性，返回布尔值

四 setattribute 和点语法对比表格

五 高频易错要点

第一 误区认为 setattribute class 可以写成 className，标签原生属性名是 class，写 className 会新增一个名叫 className 的错误属性

第二 误区认为布尔属性传 false 就可以取消，setattribute 传任何内容都是字符串，想要取消 disabled 应该使用 removeAttribute

第三 误区认为属性名区分大小写，HTML 规范属性名默认不区分，但是自定义属性建议统一小写，避免跨浏览器兼容问题

第四 误区认为数字传进去是数字类型，setattribute 内部强制转为字符串，数字 1 会变成字符串 1

六 适用场景

动态修改元素 class

设置 data 开头自定义属性

动态切换标签原生属性

需要读取标签源码同步更新的属性操作

不适用场景

修改 DOM 对象内部 JS 变量属性

需要保留布尔数字原始类型的数据

【常见问题】

问题 1 js setattribute 设置 class 为什么没有生效

回答 1 js setattribute 设置属性名称必须写 class，如果误写成 className，就会新增错误属性，不会修改元素 class，正确写法是 setAttribute class active。

问题 2 js setattribute 设置 disabled 传 false 为什么按钮还是禁用

回答 2 js setattribute 所有值都会变成字符串，字符串 false 依旧是有效值，不能解除禁用，正确做法是调用 removeAttribute disabled 来移除这个属性。

问题 3 js setattribute 和 dataset 有什么区别

回答 3 js setattribute 可以设置所有标签属性，dataset 专门用来读写 data 开头自定义属性，dataset 写法更简洁，本质底层同样是操作标签 data 属性。

【免责申明】

本文内容仅作为原生 JavaScript DOM API 学习参考，不同浏览器对 API 细节存在兼容差异，代码示例仅作演示，不直接用于生产环境。