Element.toggleAttribute

1ff811939fd0923df8321ec6d8bf9d4b?s=47 Jxck
August 21, 2018

 Element.toggleAttribute

1ff811939fd0923df8321ec6d8bf9d4b?s=128

Jxck

August 21, 2018
Tweet

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