【jQueryを完全再現】slideUp, slideDown, slideToggleを素のJavaScriptで実装する方法

不明点がありましたのでご質問させて頂ければと存じます。 Slide Downのコードでel.style.removeProperty(“display”);の表記がございますが、こちら必要でしょうか？ noneとblockの付け外しのみで良いような気がしたのですが、特別に記載している理由があればご教示頂けたら幸いです。 // slideDown const slideDown = (el, duration = 300) => el.style.removeProperty(“display”); let display = window.getComputedStyle(el).display; if (display === “none”) display = “block”; 宜しくお願い致します。

コメントありがとうございます！おっしゃる通りで、もし’block’と’none’を切り替えたい場合はremovePropertyの記述は必要ありません。しかし、’block’以外の値(例えば’flex’や’inline-block’など)にも対応したい場合は、必要になります。以下で、’flex’と’none’を切り替えたい場合について説明しますね。前提として、CSSは以下のようになっています。 ○CSS .element display: flex; > ———————— ■el.style.removeProperty(“display”);の記述がある場合 el.style.removeProperty(“display”); // 要素のstyleから’display:none’を削除 let display = window.getComputedStyle(el).display; // 要素のdisplayの値を取得（’flex’） if (display === “none”) < // 変数displayには’flex’が入っているため内は適用されない display = “block”; > el.style.display = display; // displayには’flex’が指定される ■el.style.removeProperty(“display”);の記述がない場合 let display = window.getComputedStyle(el).display; // 変数displayには、style属性の’none’が格納される（CSSの’display: flex’よりもスタイル属性が優先されるため） if (display === “none”) < // 変数displayには’none’が入っているため内を適用（デフォルト値の’block’が指定される） display = “block”; > el.style.display = display; // displayには’block’が指定される ———————— 分かりづらい説明で申し訳ないです・・。簡潔に言うと、removePropertyの行を記述しないと、CSS側で’flex’や’inline-block’を指定しても、slideDownを使用すると’block’になってしまうということです。一度自身のコードで試していただくと、理解しやすいかと思います！

📎📎📎📎📎📎📎📎📎📎