DOM元素的属性设置API包括:setAttribute(name, value)、getAttribute(name)、hasAttribute(name)、removeAttribute(name) 等

toggleAttribute(name [, force])

  1. Element.toggleAttribute(name [, force]);

name
需要切换显示的布尔属性名称,可以是自定义的规范中没有的属性。例如:

  1. document.body.toggleAttribute('zhangxinxu');

元素属性 - 图1
force
布尔值。true的话就是强制设置该属性为true,也就是添加该属性;false的话则表示移除该布尔属性。
当我们希望知道执行toggleAttribute()方法后,元素到底有没有该属性,则可以使用toggleAttribute()方法的返回值。
如果toggleAttribute()方法执行是添加属性,则返回true,否则就是false。

Polyfill

  1. if (!Element.prototype.toggleAttribute) {
  2. Element.prototype.toggleAttribute = function(name, force) {
  3. if(force !== void 0) force = !!force
  4. if (this.hasAttribute(name)) {
  5. if (force) return true;
  6. this.removeAttribute(name);
  7. return false;
  8. }
  9. if (force === false) return false;
  10. this.setAttribute(name, "");
  11. return true;
  12. };
  13. }

这段代码放在业务代码前面任意位置都可以。

示例 设置逻辑属性

toggleAttribute()是HTML元素中控制逻辑属性的不二之选。

HTML中常见的逻辑属性有:disabled、readonly、selected、checked、open(

元素使用)、novalidate(
元素使用)、required、reversed(
      元素使用)等。

      在过去,添加一个布尔属性,我们都是使用类似下面的JS代码:

      1. dialog.setAttribute('open', '');

      删除一个布尔属性值则是使用:

      1. dialog.removeAttribute('open');

      而toggle切换一个布尔属性值,则需要JS先判断当前属性的布尔状态,然后再选择是setAttribute还是removeAttribute,还是很啰嗦的。
      现在,有了toggleAttribute()方法,所有的布尔属性的操作全部都只需要1个API就搞定了。

      添加一个布尔属性,可以这样设置:

      1. dialog.toggleAttribute('open', true);

      删除一个布尔属性,也可以直接使用toggleAttribute方法:

      1. dialog.toggleAttribute('open', false);

      而切换一个布尔属性值,则更像是toggleAttribute()方的本职工作了:

      1. // 如果原来有open属性,则移除;没有open属性则添加
      2. dialog.toggleAttribute('open');