js设置标签属性

js设置标签属性

1、setAttribute()方法

使用setAttribute('属性名', '属性值')方法可以添加、修改、删除属性。

下面的demo是为input添加、修改、删除value属性：

• HTML

<input type="text" class="input">

• JS

// 添加value属性
document.querySelectorAll('.input')[0].setAttribute('value', "add value's attribute"); 

// 修改value属性
document.querySelectorAll('.input')[0].setAttribute('value', "change value's attribute"); 

// 删除value属性值
document.querySelectorAll('.input')[0].setAttribute('value', ""); 

2、获取标签属性

使用getAttribute('属性名')方法获取标签的属性

下面的demo是获取input的name属性

• HTML

<input type="text" name="inputBox" class="input">

• JS

const name = document.querySelectorAll('.input')[0].getAttribute('name');
console.log(name); // inputBox

3、删除标签属性

使用removeAttribute('属性名')方法删除标签的属性

下面的demo是删除input的name属性

• HTML

<input type="text" name="inputBox" class="input">

• JS

const name = document.querySelectorAll('.input')[0].removeAttribute('name');
console.log(name); // undefined

参考文献

[1] 关于在JS中设置标签属性