ディスプレイを設定する：ディスプレイのデフォルトとしてflex：cssの要素なし？

Question

要素をdisplay:noneに設定して最初に非表示にする方法はありますか？また、JavaScriptで後でその要素が表示されるときは、display:flexと表示されますか？

例CSS：

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

例jQueryの：

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

目的の動作：これはハードコーディングJavaScriptでflexの値をことなくdisplay:flexとして要素を示しています。

注：jQueryのCSSメソッドを使用して、要素をdisplay:flexに設定することができます。ただし、機能をプレゼンテーションから分離すること、要素がフレックスかブロックかインラインかはJavaScriptコードのビジネスではないことを目標としています。 JavaScriptの仕事は単にページの表示や非表示、ページの表示方法の変更ではありません。

また、私はdisplay:none要素やショーでdisplay:flex要素をラップし、外側のラッパーを隠すことができることを知っています。しかし、私はすべてのペインの周りに余分な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を追加して上書きします。