Element.toggleAttribute

Intro

非常にシンプルかつミッシングピースだった Element.toggleAttribute という仕様が提案された。

最近になって各ブラウザが一斉に実装を進め、リリースに向けたアナウンスが出始めている。

この仕様について解説する。

Boolean Attributes

Boolean Attribute とは、属性の存在によって真偽となる属性である。

https://html.spec.whatwg.org/#boolean-attribute

例えば button の disabled を例にとるとこうなる。

button を disabled にする場合は、仕様上は以下の 3 つの書き方がある。

<!-- 属性のみを書く -->
<button id=target disabled>toggle target</button>

<!-- 値を empty string にする -->
<button id=target disabled="">toggle target</button>

<!-- 属性名と同じにする -->
<button id=target disabled=disabled>toggle target</button>

値に true, false などを設定することで有効無効が切り替わるわけではなく、仕様上は許可されていない点に注意したい。

disabled 属性自体は JS から真偽値で操作できる。

target.disabled = true
target.disabled = false

しかし、他の boolean attribute も含め、属性自体を汎用的に操作する場合は以下のようになる。

target.setAttribute("disabled", "");
target.removeAttribute("disabled");

target.setAttribute("disabled", false); // 無効になるわけではない

無効にする場合は、属性自体を消す(omit)という点は、直感に反するところもあるかもしれない。

これをもう少し直感的にするために、引数を boolean にできる API があっても良いのではとして提案されたのが始まりだ。

Element.toggleAttribute

結果的には以下のような API に落ち着いた。

属性名を指定して toggleAttribute を呼べば、 true/false を切り替えられる。

(値は empty string が採用された)

// target = <button id=target>toggle target</button>

target.toggleAttribute("disabled") // => <button id="target" disabled="">toggle target</button>
console.log(target.disabled) // true

target.toggleAttribute("disabled") // => <button id="target">toggle target</button>
console.log(target.disabled) // false

target.toggleAttribute("disabled") // => <button id="target" disabled="">toggle target</button>
console.log(target.disabled) // true

第二引数を指定すると、現在の値に関わらず、第二引数の値に変更する。

// 今が true であれ false であれ true にする
target.toggleAttribute("disabled", true)
console.log(target.disabled) // true

// 今が true であれ false であれ false にする
target.toggleAttribute("disabled", false)
console.log(target.disabled) // false