Reset CSS display property to default value

Question

Is it possible to override the display property with its default value  For example if I have set it to none in one style  and I want to override it in a different with its default   Or is the only way to find out what the default of that element is and then set it to that  Would like to not have to know if the element is usually block  inline or whichever

User · Answer

If using javascript is allowed  you can set the display property to an empty string  This will cause it to use the default for that particular element   var element   document querySelector  span selector        Set display to empty string to use default for that element element style display         Here is a link to a jsbin   This is nice because you don t have to worry about the different types of display to revert to  block  inline  inline-block  table-cell  etc    But  it requires javascript  so if you are looking for a css-only solution  then this is not the solution for you   Note  This overrides inline styles  but not styles set in css

User · Answer

If you have access to JavaScript  you can create an element and read its computed style    function defaultValueOfCssPropertyForElement cssPropertyName  elementTagName  opt pseudoElement        var pseudoElement   opt pseudoElement    null      var element   document createElement elementTagName       document body appendChild element       var computedStyle   getComputedStyle element  pseudoElement  cssPropertyName       element remove        return computedStyle        Usage  defaultValueOfCssPropertyForElement  display    div       Output   block  defaultValueOfCssPropertyForElement  content    div     after       Output   none

User · Answer

No  it is generally not possible  Once some CSS  or HTML  code sets a value for a property on an element  there is no way to undo it and tell the browser to use its default value   It is of course possible to set a property a value that you expect to be the default value  This may work rather widely if you check the Rendering section of HTML5 CR  mostly reflecting what browsers actually do   Still  the answer is    No     because browsers may have whatever default values they like  You should analyze what was the reason for wanting to reset to defaults  the original problem may still be solvable

User · Answer

Concerning the answer by BoltClock and John  I personally had issues with the initial keyword when using IE11  It works fine in Chrome  but in IE it seems to have no effect   According to this answer IE does not support the initial keyword  Div display initial not working as intended in ie10 and chrome 29  I tried setting it blank instead as suggested here  how to revert back to normal after display none for table row  This worked and was good enough for my scenario  Of course to set the real initial value the above answer is the only good one I could find

User · Answer

A browser s default styles are defined in its user agent stylesheet  the sources of which you can find here  Unfortunately  the Cascading and Inheritance level 3 spec does not appear to propose a way to reset a style property to its browser default  However there are plans to reintroduce a keyword for this in Cascading and Inheritance level 4     the working group simply hasn t settled on a name for this keyword yet  the link currently says revert  but it is not final   Information about browser support for revert can be found on caniuse com  While the level 3 spec does introduce an initial keyword  setting a property to its initial value resets it to its default value as defined by CSS  not as defined by the browser  The initial value of display is inline  this is specified here  The initial keyword refers to that value  not the browser default  The spec itself makes this note under the all property   For example  if an author specifies all  initial on an element it will block all inheritance and reset all properties  as if no rules appeared in the author  user  or user-agent levels of the cascade  This can be useful for the root element of a  quot widget quot  included in a page  which does not wish to inherit the styles of the outer page  Note  however  that any  quot default quot  style applied to that element  such as  e g  display  block from the UA style sheet on block elements such as  lt div gt   will also be blown away   So I guess the only way right now using pure CSS is to look up the browser default value and set it manually to that  div foo   display  inline-block    div foo bar   display  block      An alternative to the above would be div foo not  bar    display  inline-block     but that involves modifying the original selector rather than an override

User · Answer

According to my understanding to your question  as an example  you had a style at the beginning in style sheet  ex  background-color  red   then using java script you changed it to another style  ex  background-color  green   now you want to reset the style to its original value in style sheet  background-color  red  without mentioning or even knowing its value  ex  element style backgroundColor    red       If I m correct  I have a good solution for you which is using another class name for the element  steps   set the default styles in style sheet as usual according to your desire  define a new class name in style sheet and add the new style you want  when you want to trigger between styles  add the new class name to the element or remove it   if you want to edit or set a new style  get the element by the new class name and edit the style as desired  I hope this helps  Regards

User · Answer

Unset display   You can use the value unset which works in both Firefox and Chrome   display  unset       foo       display  none      foo bar   display  unset

[css] Reset CSS display property to default value

Examples related to css

Examples related to default