使用顯示器：沒有但仍然保持使用的空間

-2

我有一個跨度display:none但仍然需要它的高度&寬度，有沒有辦法實現它，而無需更改顯示或使用visibility:hidden？使用顯示器：沒有但仍然保持使用的空間

.mySpan{ 
 
    display:none; 
 
}

<div> 
 
    <label>Name</label> 
 
    <input type="text" id="personName" name="personName" /> 
 
    <br/> 
 
    <span class="mySpan">Text that can be displayed or not</span> 
 
</div> 
 
<div> 
 
    <label>Last name</label> 
 
    <input type="text" id="personLastName" name="personLastName" /> 
 
    <br/> 
 
    <span class="mySpan">Text that can be displayed or not</span> 
 
</div>

我需要跨度的高度，使總有像visibility=hidden的div之間的距離。

來源

2017-02-27 Víctor Martínez

你需要向我們解釋爲什麼你不想使用可見性：隱藏其中的方式做你想要的 – mplungjan

包裝跨越到另一個元素和設置寬度和高度 - – Shin

你可以使用'不透明度：0'，但裏面的任何內容仍然是棘手的。你可以點擊文本等。 – pol

display:none;不採取任何空間，因爲你可以看到你自己的片段。然而，是否使用空白空間。

.mySpan1 { 
 
display: none; 
 
} 
 
.mySpan2 { 
 
visibility: hidden; 
 
}

<div> 
 
<label>Name</label> 
 
<input type="text" id="personName" name="personName" /> 
 
<br/> 
 
<span class="mySpan1">Text that can be displayed or not</span> text after display: none 
 
</div> 
 
<div> 
 
<label>Last name</label> 
 
<input type="text" id="personLastName" name="personLastName" /> 
 
<br/> 
 
<span class="mySpan2">Text that can be displayed or not</span> text after visibility: hidden; 
 
</div>

增加：如果你想在空餘空間，而無需使用visibility: hidden，你可以創建一個只 作爲其內容並沒有多餘的顯示參數標籤

來源

2017-02-27 13:11:36 Johannes

OP提到他不想使用'visibility：hidden' –

是的，在span中使用' '很好，謝謝！ –

如果文本滿了時大於一個行高空間，那麼這將不起作用 – mplungjan

是你在找什麼 - 沒有很好的理由不使用它。

你不能有display:none，並有該元素佔用空間

這個盒子是無形的（完全透明的，沒有什麼是畫），但仍然影響佈局。如果元素的後代具有可見性，則元素的後代將可見：可見（這在IE到第7版時不起作用）。

這裏是操縱的誤差範圍的腳本 - 我認爲是你真正想要

window.onload=function() { 
 
    var fields = document.querySelectorAll(".nameField"); 
 
    for (var i=0;i<fields.length;i++) { 
 
    fields[i].onblur=function() { 
 
     document.getElementById(this.getAttribute("data-error")).style.visibility=this.value.trim()==""?"visible":"hidden"; 
 
    } 
 
    fields[i].onfocus=function() { 
 
     document.getElementById(this.getAttribute("data-error")).style.visibility="hidden"; 
 
    } 
 
    } 
 
}

.mySpan { 
 
    visibility: hidden; 
 
}

<div> 
 
    <label>Name</label> 
 
    <input type="text" class="nameField" id="personName" name="personName" data-error="fNameSpan" /> 
 
    <br/> 
 
    <span class="mySpan" id="fNameSpan">Please enter a first name</span> 
 
</div> 
 
<div> 
 
    <label>Last name</label> 
 
    <input type="text" class="nameField" id="personLastName" name="personLastName" data-error="lNameSpan" /> 
 
    <br/> 
 
    <span class="mySpan" id="lNameSpan">Please enter a last name</span> 
 
</div>

來源

2017-02-27 13:11:29 mplungjan

OP提到他不想使用'visibility：hidden' –

I回答 – mplungjan

裹到另一個如下面的片段，

.mySpan{ 
 
    display:none; 
 
}

<div> 
 
    <label>Name</label> 
 
    <input type="text" id="personName" name="personName" /> 
 
    <br/> 
 
    <span><span class="mySpan">Text that can be displayed or not</span>&nbsp;</span> 
 
</div> 
 
<div> 
 
    <label>Last name</label> 
 
    <input type="text" id="personLastName" name="personLastName" /> 
 
    <br/> 
 
    <span><span class="mySpan">Text that can be displayed or not</span>&nbsp;</span> 
 
</div>

來源

2017-02-27 13:20:29 Shin

我不確定你想要完成什麼，但我想opacity:0將完成這項工作。 display:none從文檔流中移除元素，而visibility:hidden保留元素的框模型。

來源

2017-02-27 13:21:21

使用顯示器：沒有但仍然保持使用的空間

回答

相關問題