Jump to content

How to get an element's default CSS value


smus
 Share

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
Link to comment
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
Link to comment
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
Link to comment
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.

 

 

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

 

 

Link to comment
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
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...