Element.toggleAttribute

#wejs 2018/8/21

icons
- https://design.firefox.com/photon/visuals/product-identity-assets.html
- https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Microsoft_Edge_logo.svg
- https://commons.wikimedia.org/wiki/File:Google_Chrome_icon_(2011).svg

Transcript

1. Element.toggleAttribute #wejs #wejs 2018/8/21 Jxck
2. Boolean Attributes • 属性が有るか無いかで真偽となる属性 • つまり値はなんでも良い 2 <!-- 属性のみを書く --> <button id=target disabled>toggle target</button> <!-- 値を empty string にする --> <button id=target disabled="">toggle target</button> <!-- 属性名と同じにする --> <button id=target disabled=disabled>toggle target</button> <!-- こうではない(落とし穴) --> <button id=target disabled=true>toggle target</button>
3. Boolean Attributes • JS からはプロパティかメソッドから制御できる 3 // 各プロパティに対して target.disabled = true // or false // メソッド経由で操作 target.setAttribute("disabled", ""); // false を渡しても無効になるわけではない target.setAttribute("disabled", false); // 無効にするには消す target.removeAttribute("disabled");
4. Boolean Attributes • 無効=削除 で直感的じゃ無い • 操作に対称性がない 4 if(表示されてたら) { // 有効 target.setAttribute("disabled", ""); } else { // 無効 target.removeAttribute("disabled"); }
5. jQuery toggle() • jQuery の toggle() は display 以外に複数関数を渡す書き方があった 5 // 1.8 以降はこの書き方は deprecated // display: none の切り替えのみに $target.toggle( () => { // 奇数回に呼び出される }, () => { 　// 偶数回に呼び出される });
6. toggleAttribute • 顧客 開発者が本当に求めていたもの 6 // こう書きたい(true <-> false) target.toggleAttribute("disabled"); // もしくはこう(今どっちであっても false にする) target.toggleAttribute("disabled", false);
7. whatwg/dom issue #461 7 やろうぜ
8. whatwg/dom issue #461 8 やろう!!
9. 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 ◦ 進捗不明(やってるっぽい) 翌月には続々 と実装が
10. see also 10 https://blog.jxck.io/entries/2018-07-20/toggle-attribute.html
11. Jack thanks