设置显示器：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来覆盖它。