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中设置标签属性