JavaScript setAttribute()

setAttribute()是JavaScript的一个内置方法，它允许开发者动态地为HTML元素添加属性。其语法为：

element.setAttribute(name, value);

其中，element是要添加属性的HTML元素, name是要添加的属性的名称，value是属性的值。

用法示例

下面是一些示例展示了setAttribute()的不同用法：

1. 添加class属性

const element = document.querySelector('#myDiv');
element.setAttribute('class', 'myClass');

可以看到，上面的代码为ID为myDiv的HTML元素添加了一个class属性，使其样式变为了myClass。

2. 添加自定义属性

const element = document.querySelector('#myDiv');
element.setAttribute('data-info', 'I am some data');

上述代码为ID为myDiv的HTML元素添加了一个名为data-info的自定义属性，并将其值设置为I am some data。

3. 修改value值

const inputField = document.querySelector('#myInput');
inputField.setAttribute('value', '新的值');

上面的代码演示了如何使用setAttribute()来修改表单输入框的值。

注意事项

• setAttribute()为HTML元素添加的属性与HTML文档中预定义的属性有些差异。对于HTML标准属性，应使用相应的属性方法。
• 如果添加的属性不存在，它将被创建，如果它已经存在，则会覆盖。
• 属性名称和值都应该是字符串类型。
• 可以在任何时候使用removeAttribute()方法来删除通过setAttribute()添加的属性。

setAttribute()对于动态地改变HTML元素的属性值，实现互动和动态的Web页面非常有用。