Javascriptの条件文が失敗する

Question

私は要素の表示を切り替えようとしていますが、以下の '==='を使って条件付きの文を使っていますが、作業するコード。

誰かが 'if（smallnavbar [0] .style.display ===' none '）'という条件が機能しない理由を知っていますか？コードを動作させる方法（noneとflexの間で表示を切り替える）はありますか？

ありがとうございます！

function displayMenu(){ 
    var smallnavbar = document.getElementsByClassName("small-navbar-tabs"); 
    if (smallnavbar[0].style.display === 'none') { 
    smallnavbar[0].style.display = 'flex'; 
    } 
    else if (smallnavbar[0].style.display === 'flex') { 
    smallnavbar[0].style.display = 'none'; 
    } 
} 

Answer 1

style.displayインラインスタイル（<div style='display:block'></div>）を参照しています。 displayがスタイルシートのクラスによって設定されている場合、displayの値は空の文字列になります。

このような場合、どちらの条件も真でないため、「失敗」しているように見えます。

ifの文の前に私の仮説をconsole.logで二重にチェックするだけでいいです（当然、displayMenuと呼んでいると仮定します）。

これを解決するにはいくつかの回避策があります。 することはでき：

1. チェック代わりに、インライン1の要素のcomputed style：

   function displayMenu(){ 
       var smallnavbar = document.getElementsByClassName("small-navbar-tabs"); 
       var display = window.getComputedStyle(smallnavbar[0], "").display; 
   
       smallnavbar[0].style.display = display === 'none' ? 'flex' : 'none'; 
   } 
   

   }

2. "フレックス" と "なし" のための別のクラス名を持ち、値の代わりにその値を確認してください（ブラウザのサポートがある場合、または簡単なclassListのシムを提供する場合は

   smallnavbar[0].classList.toggle("flexible"); 
   

3. と仮定します。あなたは、したがって、あなたが持っている可能性があり、デフォルトですべてのsmall-navbar-tabsは、例えばdisplay:none持っていることを知っている： `ではなく` === `の

   if (smallnavbar[0].style.display === "flex") { 
       smallnavbar[0].style.display = ""; // remove the inline style 
   } else { 
       // since we're adding the inline style here, 
       // it would pass the first check in the future. 
       smallnavbar[0].style.display = "flex"; 
   }