如何創建一個隱藏的元素以及內聯塊

我有一個div，我想既是內聯塊又不顯示任何內容，但我必須選擇其中之一。如何創建一個隱藏的元素以及內聯塊

我的HTML：

.like_user_wrapper{ 
    margin-top:20px; 
    padding:5px; 
    height:55px; 
    box-shadow:1px 1px 10px #f0f0f0; 
    background:white; 
    display:inline-block; 
    display:none; 
}

這不是一個好主意只是藏在使用JavaScript

股利

來源

2014-02-22 Kesong Tse

「可見度：隱藏的;」一個選項？你到底想要什麼？ –

有什麼意義？如果它是'display：none'，它就不會計算任何尺寸/定位計算。如果你希望它可以計算尺寸/定位，但仍然不可見，那麼就像Hashem指出的那樣，讓它成爲'visibility：hidden'。 –

使用'visibility：hidden'而不是'display：none'。對於你的用例，它會工作得很好 – Gyandeep

只需使用visibility: hidden;

#like_user_wrapper{ 
    margin-top:20px; 
    padding:5px; 
    height:55px; 
    box-shadow:1px 1px 10px #f0f0f0; 
    background:white; 
    display:inline-block; 
    visibility: hidden; 
}

^{注：這是使用自定義的ID（ # ...），不是班級（. ...）}

如果你想要的是在某些時候變得可見，你可以使用這個JavaScript屬性與ID：

document.getElementById('like_user_wrapper').style.visibility='visible';

這可以包括在onmouseover=""，或JavaScript函數等，所以會出現你的時候想要它。這可以在HTML like this實現：

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
#like_user_wrapper { 
    margin-top:20px; 
    padding:5px; 
    height:55px; 
    box-shadow:1px 1px 10px #f0f0f0; 
    background:white; 
    display:inline-block; 
    visibility: hidden; 
} 
#hover { 
    width: 80px; 
    height: 50px; 
    background-color: red; 
} 
</style> 
</head> 
<body style="background-color:blue;"> 
<div id="like_user_wrapper">Like User Wrapper</div> 
<br><br> 
<div id="hover" onmouseover="document.getElementById('like_user_wrapper').style.visibility='visible';" onmouseout="document.getElementById('like_user_wrapper').style.visibility='hidden';">Hover over me</div> 
</body> 
</html>

幫助頁面上的可見性CSS屬性here

注：在大多數瀏覽器中，默認情況下DIV的顯示屬性爲block，因此您可能不需要inline-block - 無論如何，您都可以將其包裝在具有該屬性的<div>中。

來源

2014-02-22 21:46:23 Wilf

如果您嘗試使用jQuery隱藏並顯示元素，請將其顯示回來以避免使用jQuery.show()。

而不是$('.like_user_wrapper').css({'display': 'inline-block'});來顯示元素。

在另一方面，以隱藏它是確定只是做$('.like_user_wrapper').hide();

而且從你的CSS刪除display: inline-block。

來源

2014-02-22 21:50:11 DanC

如何創建一個隱藏的元素以及內聯塊

回答

相關問題