smus Posted June 13, 2020 Share Posted June 13, 2020 (edited) For example, an element's default value is 'inline'. It was as 'display:block' on my page, but now it is hidden by 'display:none'. I want it back to visible again, but to its default state. I tried element.style.display = "", element.style.display = "auto", as well as element.style.removeProperty = "display", as it is described here: https://stackoverflow.com/questions/21457904/change-element-display-none-back-to-default-style-value-js But it could not be changed from 'display:none' (only by using 'display:block') There is an official list of default style properties, like, for example, this one: https://www.w3schools.com/cssref/css_default_values.asp but is there a way to get it by JavaScript? Edited June 13, 2020 by smus css javascript default values Link to comment Share on other sites More sharing options...
dsonesuk Posted June 13, 2020 Share Posted June 13, 2020 Give it a id ref use that id ref in document.getElementById() and style it how you want. It will add style="display: inline;" (if you styled it as inline) being inline to the element it will have a higher precedence over styling created in css stylesheet UNLESS you used !important with it. using document.getElementById("elementsid").style.display="initial"; should also revert to elements default display value. 1 Link to comment Share on other sites More sharing options...
smus Posted June 13, 2020 Author Share Posted June 13, 2020 (edited) 1 hour ago, dsonesuk said: Give it a id ref use that id ref in document.getElementById() and style it how you want. It will add style="display: inline;" (if you styled it as inline) being inline to the element it will have a higher precedence over styling created in css stylesheet UNLESS you used !important with it. using document.getElementById("elementsid").style.display="initial"; should also revert to elements default display value. Very helpful, thanks! display = "initial" works, however, it changes the style not to display = "block" (which is default one for <section> tag), but to display = "inline". I wonder what the result would be if we do the following: <style> section{display:none} </style> <script> document.getElementsByTagName('section')[0].style.display = 'block' document.getElementsByTagName('section')[0].style.display = 'initial' </script> will it switch back to display = 'inline'? If so, why? Edited June 13, 2020 by smus Link to comment Share on other sites More sharing options...
dsonesuk Posted June 13, 2020 Share Posted June 13, 2020 Ha! Apparently the default initial value for display is 'inline', there is display:revert; and a complete reset using all: revert; which truly does give the result you require but! Limited browser support. The best solution would be to add a class name that uses display: none, then remove it, giving you its default state. Link to comment Share on other sites More sharing options...
smus Posted June 13, 2020 Author Share Posted June 13, 2020 The page already goes with <style>section{display:none}</style> written in it. Adding and removing classes won't influence it. I also tried section.style.display='unset' which provides the same result as 'initial', and section.style.display=' ', but it does not work at all. As it is discussed here: https://stackoverflow.com/questions/18534561/what-is-use-of-initial-value-in-css 'initial' only resets to a CSS default, not to a browser default. And they only plan to add something in CSS4. While we are waiting the only reasonable way I thought about is to check each element if it is actual initial style property is 'block' or not, before switching it back from 'display:none'. Something like: if(element.tagName == 'div'){element.style.display = 'block'}... ☺️ Link to comment Share on other sites More sharing options...
dsonesuk Posted June 13, 2020 Share Posted June 13, 2020 (edited) If you had done as i suggested 8 hours ago, dsonesuk said: The best solution would be to add a class name that uses display: none section{display:none} DOES NOT! refer to a class name. Lets test my suggestion done correctly <!DOCTYPE html> <html> <head> <style> section.hide{display:none} </style> </head><body> <h1>The section element</h1> <section class="hide"> <h2>WWF History</h2> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section> <section class="hide"> <h2>WWF's Symbol</h2> <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section> <script> var x = document.getElementsByTagName('section')[0] compStyles = window.getComputedStyle(x); alert("className : "+x.className+",\ncurrent computered styling#1 : "+compStyles.getPropertyValue('display') ); x.className=''; alert("className : "+x.className+",\ncurrent computered styling#2 : "+compStyles.getPropertyValue('display') ); x.className='hide'; alert("className : "+x.className+",\ncurrent computered styling#3 : "+compStyles.getPropertyValue('display') ); </script> </body> </html> Edited June 13, 2020 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted June 13, 2020 Share Posted June 13, 2020 Unset will reset to style property 'display' default which as already mentioned is display: inline. Using style.display="" remove the property inline display completely, so the only one styling for display, is the one as section{display:none;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now