設置顯示器：flex是默認的display：none元素在css中？

Question

有什麼方法可以將元素設置爲display:none以初始隱藏它，並且還指定當元素稍後由JavaScript顯示時，它將顯示爲display:flex？

例CSS：

#Container{ 
    display:flex; 
    display:none;  
} 

實施例的jQuery：

$('#Container').show(); 

期望的行爲：這顯示沒有硬編碼在JavaScript中的flex值的元素作爲display:flex。

注：我很清楚，我可以簡單地使用jQuery的CSS方法將元素設置爲display:flex。但是，目標是將功能與演示分開，並且元素是否爲flex或block或inline不是JavaScript代碼的業務。 JavaScript的工作就是顯示或隱藏它，而不是改變頁面的顯示方式。

我也知道我可以將display:flex元素包裝在display:none元素中，並顯示和隱藏外層包裝。但我很想知道是否有一個聰明的方法來實現這一點，而不是在每個窗格周圍添加額外的div。

Answer 1

其中最靈活的選擇是創建一些工具類：

.hidden{ display: none; } 
.flex{ display: flex; } 

然後：

$('#Container').addClass('flex'); 

Answer 2

做這將是隻是一個類添加到元素的最佳方式而不是show()。那麼這個類有display: flex屬性：

$('div').addClass('flex');

div { 
 
    display: none; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
} 
 
div.flex { 
 
    display: flex; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div></div>

但是，如果你想使用show()你可以做這樣的事情：

$('div').show();

div { 
 
    display: none; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
} 
 
div[style*="display: block"] { 
 
    display: flex !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div></div>

當使用show()在div上，它將div設置爲display block，因此通過使用div[style*=display: block]它選擇其style-屬性包含display: block的div。然後我們通過加入display: flex !important來覆蓋它。