可通过四种方式为HTML5元素添加属性：一、JavaScript setAttribute方法动态设置；二、HTML标签中直接声明；三、点语法直接赋值内置属性；四、dataset API操作data-*属性。

如果您需要为HTML5元素动态添加属性，可以通过JavaScript的setAttribute方法实现，也可以在HTML标签中直接声明属性。以下是具体操作步骤：

一、使用JavaScript setAttribute方法添加属性

setAttribute方法允许在运行时为已存在的DOM元素动态添加或修改属性，适用于需要根据条件或用户交互控制属性的场景。

1、获取目标HTML元素，例如通过id选择器：document.getElementById("myElement")。

2、调用setAttribute方法，传入属性名和属性值两个参数：element.setAttribute("data-id", "123")。

3、可连续添加多个属性，如同时设置class和custom属性：element.setAttribute("class", "active"); element.setAttribute("data-status", "loaded")。

二、在HTML标签中直接书写属性

在编写HTML源码时，可在起始标签内直接添加标准或自定义属性，浏览器解析时即生效，适用于静态、确定的属性配置。

1、为元素添加内置属性，如id、class、src等：。

2、添加HTML5自定义数据属性（data-*）：管理员区域。

3、添加布尔属性（如hidden、disabled），仅存在即表示true：不可点击。

三、使用JavaScript点语法直接赋值属性

对于部分内置属性（如id、className、src、hidden等），可通过DOM对象的对应属性直接赋值，比setAttribute更简洁且兼容性良好。

1、获取目标元素：const el = document.querySelector("input")。

2、直接设置标准属性值：el.id = "searchBox"; el.className = "form-control"。

3、设置布尔属性：el.hidden = true; el.disabled = false。

四、使用dataset API操作data-*属性

dataset提供专门访问HTML5 data-*自定义属性的接口，自动将连字符命名转为驼峰式，语义清晰且无需手动解析。

1、确保HTML中已声明data属性：

2、通过dataset读取或写入：const sec = document.querySelector("section"); sec.dataset.pageNumber = "6"。

3、删除data属性可使用delete操作符：delete sec.dataset.lastUpdated。