Jump to content
smus

How to get an element's default CSS value

Recommended Posts

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 by smus
css javascript default values

Share this post


Link to post
Share on other sites

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.

  • Thanks 1

Share this post


Link to post
Share on other sites
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 by smus

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
Share on other sites

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'}... ☺️

 

 

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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;}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...