點擊顯示'Div 1'並隱藏'Div 2'＆點擊同樣的按鈕顯示'Div 2'並隱藏'Div 1'？

Question

我可以用不同的按鈕來做這個功能。但我不能通過點擊相同的按鈕來實現這一點。

使用ternary-operator

使用Element.style.display任何幫助/建議

感謝

Answer 1

• 切換當前元素設置display CSS 財產

var btn = document.getElementById('btn'); 
 
var curr = 'div2'; 
 
btn.onclick = function() { 
 
    document.getElementById(curr).style.display = 'none'; 
 
    curr = curr === 'div2' ? 'div1' : 'div2'; 
 
    document.getElementById(curr).style.display = 'block'; 
 
};

div { 
 
    display: none; 
 
}

<div id="div1">#div1</div> 
 
<div id="div2">#div2</div> 
 
<button id='btn'>Change</button>

Answer 2

任何這樣的事情？

function divchange(){ 
 
    div1 = document.getElementById("div1"); 
 
    div2 = document.getElementById("div2"); 
 
    if(div1.style.display == "none"){ 
 
    div1.style.display = "block"; 
 
    div2.style.display = "none"; 
 
    }else{ 
 
    div1.style.display = "none"; 
 
    div2.style.display = "block"; 
 
    } 
 
}

<button id="divchangebutton" onclick="divchange();">test</button> 
 
<div id="div1">asdf</div> 
 
<div id="div2" style="display:none;">qwert</div>

Answer 3

問題 - 如果 「顯示：無」 套在CSS中，我們不能得到的價值。 「elem.style.display」返回空字符串。 我們可以使用Computed Style來解決這個問題。

 var btn = document.getElementById("btn-toggle"); 
 
     btn.addEventListener("click", function(){ 
 
      var one = document.querySelector(".one"); 
 
      var tow = document.querySelector(".tow"); 
 
      
 
      one.style.display = (getRealDisplay(one) == 'none') ? 'block' : 'none'; 
 
      tow.style.display = (getRealDisplay(tow) == 'none') ? 'block' : 'none'; 
 
     }); 
 
     
 
     // get real value of 'display' property 
 
     function getRealDisplay(elem) { 
 
      if (elem.currentStyle) { 
 
       return elem.currentStyle.display; 
 
      } else if (window.getComputedStyle) { 
 
       var computedStyle = window.getComputedStyle(elem, null); 
 
       return computedStyle.getPropertyValue('display'); 
 
      } 
 
     }

 .one, .tow{ 
 
      width:200px; 
 
      min-height: 200px; 
 
      background-color:burlywood; 
 
     } 
 
     .tow{ 
 
      display: none; 
 
      background-color:cadetblue; 
 
     }

<div class="one">1</div> 
 
    <div class="tow">2</div> 
 
    <button id="btn-toggle">show hide</button>