Change the `display: none` of elements back to their original value

Question

Change the `display: none` of elements back to their original value

Explanation

In my coding practice, I have implemented a script that hides certain elements if the user lacks the necessary permission to interact with them. To achieve this, I utilize the CSS property display: none.

However, when it comes time to reveal these hidden elements, I face the dilemma of restoring their display value without assuming it was originally set to block. Is there a method to reset the display property or assign it a generic value?

Example

For instance, consider the element

<div class="fancy-class">...</div>

. If the class fancy-class is styled as inline-block, changing it abruptly to block within my script could disrupt the user interface.

Efforts

I have experimented with utilizing display: initial; however, this action merely reverts the styling to the default settings specified for HTML elements rather than capturing the original class-specific styles. Resorting to storing and reapplying the original values in an array seems cumbersome and inelegant.

javascript html css

Answer 1

Answer №1

For resetting the style.display of an element, you can use the following code: element.style.display = ""

(() => {
  const displayState = reset => 
    Array.from(document.querySelectorAll("div"))
      .forEach( el => el.style.display = reset ? "" : "none" );
    //                                           ^ restore original display state
  document.querySelector("#showAll").addEventListener("click", () => displayState(true));
  document.querySelector("#hideAll").addEventListener("click", () => displayState());
})();

#first, #second, #third {
  display: inline-block;
  margin-right: 1em;
}

<div id="first">[First]</div>
<div id="second">[Second]</div>
<div id="third">[Third]</div>
<button id="showAll">show divs</button>
<button id="hideAll">hide divs</button>

Answer 2

For resetting the style.display of an element, you can use the following code: element.style.display = ""

(() => {
  const displayState = reset => 
    Array.from(document.querySelectorAll("div"))
      .forEach( el => el.style.display = reset ? "" : "none" );
    //                                           ^ restore original display state
  document.querySelector("#showAll").addEventListener("click", () => displayState(true));
  document.querySelector("#hideAll").addEventListener("click", () => displayState());
})();

#first, #second, #third {
  display: inline-block;
  margin-right: 1em;
}

<div id="first">[First]</div>
<div id="second">[Second]</div>
<div id="third">[Third]</div>
<button id="showAll">show divs</button>
<button id="hideAll">hide divs</button>

Answer 3

Answer №2

Prior to hiding an element by setting its display to none, it's helpful to save the current display value and reapply it later.

var savedDisplay = document.getElementsByClassName("fancy-class").style.display;
document.getElementById("fancy-class").style.display = "none";

Restore the original display attribute using the previously saved value.

document.getElementById("fancy-class").style.display = savedDisplay;

Answer 4

Prior to hiding an element by setting its display to none, it's helpful to save the current display value and reapply it later.

var savedDisplay = document.getElementsByClassName("fancy-class").style.display;
document.getElementById("fancy-class").style.display = "none";

Restore the original display attribute using the previously saved value.

document.getElementById("fancy-class").style.display = savedDisplay;

Change the `display: none` of elements back to their original value

Explanation

Example

Efforts

Answer №1

Answer №2

Similar questions

$scope.apply is triggering both "catch" and "then" handlers

Steps to handle the change event of a p:inputText element

Error: The Typescript module in Angular 2 does not have the constant 'FORM_DIRECTIVES' available for export

Enable the ability for anchor links to be clickable when the CSS media print format is used to generate

Guide on converting a date input to a timestamp

send the ID of the element as an argument in jQuery

Tips for Aligning Form Elements in the Middle using Bootstrap

Google Chrome extension with Autofocus functionality

The Vuetify v-img component fails to display images when using absolute paths

Tips for keeping a login session active on multiple tabs

Searching by multiple parameters in Angular.js

The jsx file is not being parsed by Webpack

What is the best way to showcase two data frames side by side in an HTML template or webpage without using frames?

Utilizing variables across various scopes in AngularJS

What causes HttpPostedFileBase to fail on large files before reaching server-side validation?

The fontloader in three.js encountered an error while trying to read undefined generateshapes

Tips for combining all included files into one with Babel

Unable to retrieve DateTime.Now as a string within a Razor view

give parameters to a node function being exported

div value causing erratic behavior in cycling process