HTML中动态设置元素属性有五种方法：一、用setAttribute设置任意属性；二、直接赋值DOM属性（如src、className）；三、用dataset操作data-*属性；四、用innerHTML插入带属性的HTML；五、用classList控制class。
如果您需要在HTML中动态为元素设置属性，可以通过JavaScript操作DOM来实现。以下是几种常用的方法：
一、使用setAttribute方法
setAttribute是DOM元素的原生方法，用于为指定元素添加或修改任意属性，包括标准属性和自定义data属性。
1、获取目标元素，例如通过document.getElementById("myDiv")。
2、调用该元素的setAttribute方法，传入属性名和属性值两个参数。
立即学习“前端免费学习笔记（深入）”；
3、例如：element.setAttribute("class", "active"); 会将class属性设为active。
4、对data属性同样有效，如element.setAttribute("data-id", "1001");。
二、直接赋值属性属性（property）
对于HTML中存在对应DOM property的属性（如id、className、src、href等），可直接通过点语法赋值，该方式修改的是DOM对象的属性而非HTML特性（attribute），但多数情况下效果一致且性能更优。
1、获取目标元素，例如const img = document.querySelector("img");。
2、直接赋值：img.src = "https://example.com/photo.jpg";。
3、修改class时使用className而非class：img.className = "thumbnail";。
4、设置布尔属性（如disabled）时，直接赋true/false：button.disabled = true；。
三、使用dataset API操作data-*属性
dataset提供专门用于读写data-*自定义属性的接口，属性名自动转换为驼峰命名，避免手动处理连字符。
1、确保HTML元素含有data属性，例如
。2、获取元素后访问其dataset属性：const box = document.getElementById("box");。
3、写入数据：box.dataset.userId = "456"; 对应生成data-user-id="456"。
4、写入含连字符的多段名：box.dataset.lastLogin = "2024-05-02"; 自动映射为data-last-login。
四、使用innerHTML配合模板字符串插入带属性的HTML
当需批量创建或替换包含特定属性的元素时，可通过字符串拼接生成HTML片段并注入，适用于初始化场景，但需注意XSS风险。
1、构造含属性的HTML字符串，例如const htmlStr = ``;。
2、选取容器元素，如const container = document.getElementById("form-actions");。
3、赋值innerHTML：container.innerHTML = htmlStr;。
4、若需后续操作新元素，必须在赋值后重新查询：const newBtn = container.querySelector("[data-action='save']");。
五、使用classList控制class属性
针对class属性的增删改查，classList提供语义化方法，避免字符串拼接错误，支持原子性操作。
1、获取目标元素，例如const header = document.querySelector("header");。
2、添加类名：header.classList.add("sticky", "dark-mode");。
3、移除类名：header.classList.remove("dark-mode");。
4、切换类名（存在则删，不存在则加）：header.classList.toggle("collapsed");。
5、检查是否包含某类：if (header.classList.contains("sticky")) { ... }。
