javascript - Set display:flex as the default for a display:none element in css? - Stack Overflow

admin管理员组

文章数量:1345090

Is there any way to set an element to display:none to initially hide it and also specify that, when the element is shown later by JavaScript, it be shown as display:flex?

Example CSS:

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

Example jQuery:

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

Desired behavior: This shows the element as display:flex without hard-coding a value of flex in JavaScript.

Note: I am well aware that I can simply set the element to display:flex with jQuery's CSS method. However, the goal is to separate functionality from presentation, and whether an element is flex or block or inline is not the business of the JavaScript code. JavaScript's job is simply to show or hide it, not to change how the page is presented.

I'm also aware that I could wrap the display:flex element in a display:none element and show and hide the outer wrapper. But I'm curious to know if there is a clever way of achieving this without adding extra divs around every pane.

Is there any way to set an element to display:none to initially hide it and also specify that, when the element is shown later by JavaScript, it be shown as display:flex?

Example CSS:

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

Example jQuery:

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

Desired behavior: This shows the element as display:flex without hard-coding a value of flex in JavaScript.

Note: I am well aware that I can simply set the element to display:flex with jQuery's CSS method. However, the goal is to separate functionality from presentation, and whether an element is flex or block or inline is not the business of the JavaScript code. JavaScript's job is simply to show or hide it, not to change how the page is presented.

I'm also aware that I could wrap the display:flex element in a display:none element and show and hide the outer wrapper. But I'm curious to know if there is a clever way of achieving this without adding extra divs around every pane.

• javascript
• jquery
• css
• flexbox

Share Follow edited Jan 31, 2017 at 21:31 TylerH 21.1k7878 gold badges7979 silver badges114114 bronze badges asked Jan 31, 2017 at 20:33 NickNick 11.4k1010 gold badges5252 silver badges7979 bronze badges 6

• 2 Could you use another class to hide the elements? Then just remove the hiding class with JS and you end up with the flex from original css? – Sami Commented Jan 31, 2017 at 20:37
• as sami says, use use addClass()/removeClass() which is also a good practice – G-Cyrillus Commented Jan 31, 2017 at 20:40
• That's what I'm doing now, but I was hoping since it's 2017 and we have flex boxes and web sockets that we might have some clever way to set a default display type for an element that doesn't get clobbered by hiding it. – Nick Commented Jan 31, 2017 at 20:49
• 2 @Nick What you want is box-supress. The proposal has been deferred, so we will need to wait some years. – Oriol Commented Jan 31, 2017 at 20:54
• @Oriol - Yes, that's the kind of answer I was looking for. It only took them 20 years to get vertical alignment working so I'm optimistic that they'll sort this one out... in time. – Nick Commented Jan 31, 2017 at 21:01

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 6

The best way to do it would be to just add a class to the element instead of show(). Then this class has the property of display: flex:

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

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

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

But if you want to use show() you can do something like this:

$('div').show();

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

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

When using show() on the div, it sets the div to display block, so by using div[style*=display: block] it selects the div whose style-attribute contains display: block. Then we override it by adding display: flex !important.

One of the most flexible options is to create some utility classes:

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

Then:

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

本文标签： javascriptSet displayflex as the default for a displaynone element in cssStack Overflow