Question

有没有办法将元素设置为display:none以便最初隐藏它，并指定当稍后由JavaScript显示元素时，它会显示为display:flex？

CSS示例：

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

示例jQuery ：

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

所需行为：这会将元素显示为display:flex ，而在JavaScript中对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>

在div上使用show()时，它会将div设置为display block，因此使用div[style*=display: block]选择其style - 属性包含display: block的div }。然后我们通过添加display: flex !important来覆盖它。

设置display：flex作为display的缺省值：css中没有元素？

2 个答案: