0

I have a a web page where various fields are shown or hidden by toggling between "display:block" and "display:none". However, I added some extra stuff to the page and discovered that I needed to special-case several tags: TD needs to use "display:table-cell:, TR needs to use "display:table-row", and so on...

Is there any general off-the-shelf solution to this (i.e. look up the "natural" display type based on the tag name) or am I stuck with creating a JS object by hand which lists tag names and the corresponding display types?

user1636349
  • 458
  • 1
  • 4
  • 21
  • Does this answer your question? [Browsers' default CSS for HTML elements](https://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements) – Heretic Monkey Jun 10 '21 at 19:08
  • Thanks for the link. If this is a way of saying "you have to create a JS object of your own", then yes, it does answer the question. :) – user1636349 Jun 10 '21 at 19:30
  • If that's what you want to get out of it. Or, you could actually look at the default stylesheets for the different browsers and analyze them and find that they all have a lot of commonality. For instance, as you noticed, `td` tends to have `display: table-cell` applied to it. But that would mean work on your part; much easier to run some code on the user's browser and waste their cycles... – Heretic Monkey Jun 10 '21 at 19:37
  • As Aravinth mentions below, there is a display:revert option which does exactly that without all the fuss. – user1636349 Jun 14 '21 at 10:02

1 Answers1

0

You can apply revert to display property to set the element to it's original value and get the original value by Javascript.

const getOriginalDisplayProperty = (elem) => {
  const modifiedDisplayProperty = getDisplayProperty(elem); //store modified display property
  elem.style.display = "revert"; //revert to original display property
  setTimeout(() => {
    elem.style.display = modifiedDisplayProperty; // Again set original display property
  }, 0);
  return getDisplayProperty(elem);
};

const getDisplayProperty = (elem) =>
  window.getComputedStyle(elem, null).display;

getOriginalDisplayProperty(document.querySelector(".test"));
getOriginalDisplayProperty(document.querySelector(".test-span"));
div {
  display: inline;
}
span {
  display: flex;
}
<div class="test"></div>
<span class="test-span"></span>
Aravinth Ramesh
  • 332
  • 2
  • 7