Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Element.toggleAttribute

Jxck
August 21, 2018

 Element.toggleAttribute

Jxck

August 21, 2018
Tweet

More Decks by Jxck

Other Decks in Technology

Transcript

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

    View Slide

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

    toggle target

    toggle target

    toggle target

    toggle target

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. whatwg/dom issue #461
    7
    やろうぜ

    View Slide

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

    View Slide

  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
    ○ 進捗不明(やってるっぽい)
    翌月には続々
    と実装が

    View Slide

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

    View Slide

  11. Jack
    thanks

    View Slide