DOM元素的属性设置API包括:setAttribute(name, value)、getAttribute(name)、hasAttribute(name)、removeAttribute(name) 等
toggleAttribute(name [, force])
Element.toggleAttribute(name [, force]);
name
需要切换显示的布尔属性名称,可以是自定义的规范中没有的属性。例如:
document.body.toggleAttribute('zhangxinxu');
force
布尔值。true的话就是强制设置该属性为true,也就是添加该属性;false的话则表示移除该布尔属性。
当我们希望知道执行toggleAttribute()方法后,元素到底有没有该属性,则可以使用toggleAttribute()方法的返回值。
如果toggleAttribute()方法执行是添加属性,则返回true,否则就是false。
Polyfill
if (!Element.prototype.toggleAttribute) {
Element.prototype.toggleAttribute = function(name, force) {
if(force !== void 0) force = !!force
if (this.hasAttribute(name)) {
if (force) return true;
this.removeAttribute(name);
return false;
}
if (force === false) return false;
this.setAttribute(name, "");
return true;
};
}
示例 设置逻辑属性
toggleAttribute()是HTML元素中控制逻辑属性的不二之选。
HTML中常见的逻辑属性有:disabled、readonly、selected、checked、open(