Element.toggleAttribute #wejs #wejs 2018/8/21 Jxck

Boolean Attributes ● 属性が有るか無いかで真偽となる属性 ● つまり値はなんでも良い 2 toggle target toggle target toggle target toggle target

Boolean Attributes ● JS からはプロパティかメソッドから制御できる 3 // 各プロパティに対して target.disabled = true // or false // メソッド経由で操作 target.setAttribute("disabled", ""); // false を渡しても無効になるわけではない target.setAttribute("disabled", false); // 無効にするには消す target.removeAttribute("disabled");

Boolean Attributes ● 無効=削除 で直感的じゃ無い ● 操作に対称性がない 4 if(表示されてたら) { // 有効 target.setAttribute("disabled", ""); } else { // 無効 target.removeAttribute("disabled"); }

jQuery toggle() ● jQuery の toggle() は display 以外に複数関数を渡す書き方があった 5 // 1.8 以降はこの書き方は deprecated // display: none の切り替えのみに $target.toggle( () => { // 奇数回に呼び出される }, () => { 　// 偶数回に呼び出される });

toggleAttribute ● 顧客 開発者が本当に求めていたもの 6 // こう書きたい(true <-> false) target.toggleAttribute("disabled"); // もしくはこう(今どっちであっても false にする) target.toggleAttribute("disabled", false);

whatwg/dom issue #461 7 やろうぜ

whatwg/dom issue #461 8 やろう!!

Ship 9 ● Firefox ○ 61 をターゲット ○ https://groups.google.com/forum/#!msg/mozilla.dev.platform/wwU0TW80u1g/X_V3091yCAAJ ○ https://bugzilla.mozilla.org/show_bug.cgi?id=1469592 ● Chrome ○ canary で使える ○ https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/mAWBTaANvmE/OgaCRH0 4BAAJ ○ https://bugs.chromium.org/p/chromium/issues/detail?id=854960 ● Safari ○ TP61 に入った ○ https://webkit.org/blog/8365/release-notes-for-safari-technology-preview-61/ ○ https://trac.webkit.org/changeset/233475/webkit/ ● Edge ○ 進捗不明(やってるっぽい) 翌月には続々 と実装が

see also 10 https://blog.jxck.io/entries/2018-07-20/toggle-attribute.html

Jack thanks