ボタンを表示する際の問題

Question

ここにはスパンとボタンを持つdivがあります。スパンには、チェックボックスとそのテキストが含まれます。

doucment.readyで

<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> 

、そこに条件チェックがあると可視性を管理する：

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は、要素がそれに割り当てられていないスペースが消えます。