顯示按鈕中的問題

Question

這是一個具有跨度和按鈕的div。範圍包含一個複選框及其文本。

<div style="margin-top:10px;" id="dvCopysave"> 
    <span id="spancopy"> 
     <input type="checkbox" id="DynamicCopy" class="checkall" style="font-size: medium;border-width:medium;margin-left:375px" onclick="DynamicCopy_Onclick()" /> 
     <b> Copy data to other panels </b> &nbsp; &nbsp; 
    </span> 
    <button id="DynamicAdd" type="button" onclick="DynamicSave_Onclick()"> 
     Save 
    </button> 
</div> 

在doucment.ready，有一個條件檢查和管理可見性：

if (@Model.Target == 2)//Inspection details ->questions 
{ 
    var panels='@Model.srPanelList'; 
    var lst=panels.split('|'); 

    $("#id").css("display", "none"); 

    if(lst.length-1>1) 
    { 
     document.getElementById("spancopy").style.visibility='visible';    
    } 
    else 
    { 
     document.getElementById("spancopy").style.visibility='hidden';    
    } 
} 

一切工作正常，但是當spancopy是不可見的，按鍵的保存位置並沒有改變，它仍然是一樣的。所以外觀和感覺有小問題.....

Answer 1

設置visibility不影響元素佔用的框區域。如果您還想刪除佔用的區域，請將該元素的display屬性設置爲none。

Answer 2

這是因爲...style.visibility='hidden'。 visibility:hidden表示元素在頁面上看不到，但分配空間因此佔用空間。因此，而不是visibility，你需要使用display，如：

... 
if(lst.length-1>1) 
{ 
    document.getElementById("spancopy").style.display='block';    
} 
else 
{ 
    document.getElementById("spancopy").style.display='none';    
} 
... 

display:none使該元素沒有分配給它的空間消失。