元素属性

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（