如何切換div的顯示狀態而不是可見性

Question

當某個語句為真時，我正在嘗試切換div的存在。

我正在使用以下JavaScript / AJAX的ATM：

   function checkSession() {
    $.ajax({
            url:  '/dev/php/checkSession.php',
            type: 'POST',
            error: function(ja){
                console.log(ja);
            },      
            success: function(response) {
                if(response == "")
                {
                var elem = document.getElementById("liitem");
                elem.innerHTML = "Inloggen";
                var elem2 = document.getElementById("aanmelden");
                elem2.style.visibility = 'visible';
                }

            else {
                sessionmaybe = response;
                var elem = document.getElementById("liitem");
                elem.innerHTML = 'Uitloggen';
                var elem2 = document.getElementById("aanmelden");
                elem2.style.visibility = 'hidden';
            }
            }
        })
}

問題是，當我調整窗口大小時，div仍然具有樣式。

多虧了浮動，菜單通常會放在徽標旁邊。

有沒有辦法切換div的樣式？

Answer 1

使用style.display= "none" ，給定visibilty將隱藏該元素並保留DOM元素將要保留的空間，這與display:none不同，它將從DOM中刪除

從MDN

隱

該框是不可見的（完全透明，未繪制任何內容），但仍會影響布局。 如果元素的后代具有可見性，則將可見：visible（在IE 7之前的版本中不起作用）。

  function checkSession() {
    $.ajax({
            url:  '/dev/php/checkSession.php',
            type: 'POST',
            error: function(ja){
                console.log(ja);
            },      
            success: function(response) {
                if(response == "")
                {
                var elem = document.getElementById("liitem");
                elem.innerHTML = "Inloggen";
                var elem2 = document.getElementById("aanmelden");
                elem2.style.style.display = 'inline-block'; // whatever property fits better here
                }

            else {
                sessionmaybe = response;
                var elem = document.getElementById("liitem");
                elem.innerHTML = 'Uitloggen';
                var elem2 = document.getElementById("aanmelden");
                elem2.style.style.display = 'none';
            }
            }
        })
}

Answer 2

如果使用display: none則該元素仍將存在於DOM中，但不會占用任何空間。 在使用jQuery時，您可以簡化此過程以調用show() / hide()或使用toggle() ：

function checkSession() {
  $.ajax({
    url:  '/dev/php/checkSession.php',
    type: 'POST',
    error: function(ja) {
      console.log(ja);
    },      
    success: function(response) {
      $("#liitem").text(response == "" ? 'Inloggen' : 'Uitloggen');
      $("#aanmelden").toggle(response == "");
    }
  });
}

Answer 3

使用display: none ＆ display: block屬性代替visibility 。 與visibility不同， display不會占用DOM中的空間。

但是，與.aanmelden元素關聯的任何transition或animation現在都將消失，因為display將呈現狀態，而不是進行過渡所需的步進功能。

   function checkSession() {
    $.ajax({
            url:  '/dev/php/checkSession.php',
            type: 'POST',
            error: function(ja){
                console.log(ja);
            },      
            success: function(response) {
                if(response == "")
                {
                var elem = document.getElementById("liitem");
                elem.innerHTML = "Inloggen";
                var elem2 = document.getElementById("aanmelden");
                elem2.style.display = 'block';
                }

            else {
                sessionmaybe = response;
                var elem = document.getElementById("liitem");
                elem.innerHTML = 'Uitloggen';
                var elem2 = document.getElementById("aanmelden");
                elem2.style.display = 'none';
            }
            }
        })
}