CODEWITHSUNDEEP
javascripthtmlcss
Eduardo Ponce de Leon
Eduardo Ponce de Leon

Reputation: 9696

Change element display none back to default style value JS

I have a function in JS that hides the element parsed:

function hide(id){
  document.getElementById(id).style.display = "none";
}

How can I create a function that brings back the element to the default style value. For instance a div display property is "block" as for an image is "inline-block", other elements are "inline" or lists are "list-item" How can I bring them back their default state?

function show(id){
  document.getElementById(id).style.display = "?????";
}

I know how to do it in Jquery but it is not an option.

In CSS there might be styles for the elements including style:none, which need to be overwritten to the default value.

Since there is CSS in my example making style.display = '' eliminates the style added with JS but gets back to whatever style is added in CSS, I want to bring it back to its default value even before assigning styles with CSS.

I tried this as it was suggested in a link in one of the comments:

elem = document.getElementById(id);
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("display");

but in this case 'theCSSprop' returns "none" for a div, when I expect "block"

Any ideas? Thanks.

Upvotes: 21

Views: 41269

Answers (6)

Banzay
Banzay

Reputation: 9470

Here is one more solution for retrieving any property default value of any element. Idea is following:

  1. Get nodeName of specific element
  2. Append a fake element of the same node name to body
  3. Get any property value of the fake element.
  4. Remove fake element.

function getDefaultValue(element, property) {
    var elDefault = document.createElement(element.nodeName);
    document.body.appendChild(elDefault);
    propertyValue = window.getComputedStyle(elDefault,null).getPropertyValue(property);
    document.body.removeChild(elDefault);
  return propertyValue;
}
 function resetPropertyValue (element,propertyName) {
    var propertyDefaultValue = getDefaultValue(element, propertyName);
    if (element.style.setProperty) {
        element.style.setProperty (propertyName, propertyDefaultValue, null);
    } 
    else {
        element.style.setAttribute (propertyName, propertyDefaultValue);
    }
}
#d {
  background: teal;
  display: inline;
}
<button onclick="resetPropertyValue(document.getElementById('d'), 'display')">Try it</button>
<div id="d">test</div>

Upvotes: 2

jcxz100
jcxz100

Reputation: 61

Note: If you define display:none; for a class or tag (either in a separate css file or in the head section), the above methods won't work.

Then you will have to determine which type of tag + class it is and manually assign the value specific to it.

These are examples of what may not work:

// In many cases this won't work:
function ShowHide_WillRarelyWork(id, bDisplay) {
    // Note: This will fail if parent is of other tag than element.
    var o = document.getElementById(id);
    if (o == null) return;
    //
    if (bDisplay) {
        o.style.display = 'inherit';
        o.style.visibility = true;
    }
    else {
        o.style.display = 'none';
    }
} // ShowHide_WillRarelyWork(...)

// This will work in most, but not all, cases:
function ShowHide_MayWork(id, bDisplay) {
    // Note: This will fail if element is declared as 'none' in css.
    var o = document.getElementById(id);
    if (o == null) return;
    //
    if (bDisplay) {
        o.style.display = null;
        o.style.visibility = true;
    }
    else {
        o.style.display = 'none';
    }
} // ShowHide_MayWork(...)

This is long but will most probably work:

function getDefaultDisplayByTag(sTag) {
    // This is not fully implemented, as that would be very long...
    // See http://www.w3.org/TR/CSS21/sample.html for full list.
    switch (sTag) {
        case 'div':
        case 'ul':
        case 'h1':
        case 'h2':
        case 'h3':
        case 'h4':
        case 'h5':
        case 'h6':      return 'block';
        //
        case 'li':      return 'list-item';
        //
        case 'table':   return 'table';
        //
        case 'td':
        case 'th':      return 'table-cell';
    }
    // Fallback:
    return 'block';
} // getDefaultDisplayByTag(...)
//
function computeDisplay(o) {
    var oFunction = window.getComputedStyle;
    if (oFunction) {
        var oStyle = window.getComputedStyle(o)
        if ((oStyle) && (oStyle.getPropertyValue)) {
            return oStyle.getPropertyValue('display');
        }
    }
    if (window.currentStyle) {
        return window.currentStyle.display;
    }
    return null; // <-- This is going to be a bad day...
} // computeStyle(...)
//
// This will most probably work:
function ShowHideObject_WillProbablyWork(o, bDisplay, bMaybeRecursive) {
    if ((o == null) || (o == undefined) || (o == document) || (o.tagName == undefined)) return;
    //
    if (bDisplay == null) bDisplay = true
    if (!bDisplay) {
        o.style.display = 'none';
    }
    else {
        // First remove any directly set display:none;
        if ((o.style.display == 'none') || (o.style.display == '')) {
            o.style.display = null;
        }
        //
        var sDisplay = null;
        var sDisplayCurrent = computeDisplay(o);
        var oParent = o.parentNode;
        // Was this element hidden via css?
        if ((sDisplayCurrent == null) || (sDisplayCurrent == 'none')) {
            // We must determing a sensible display value:
            var sTag = o.tagName;
            sDisplay = getDefaultDisplayByTag(sTag);
        } // else: if ((sDisplayCurrent != null) && (sDisplayCurrent != 'none'))
        //
        // Make sure visibility is also on:
        if (sDisplay != null) o.style.display = sDisplay;
        o.style.visibility = true;
        //
        if (bMaybeRecursive) {
            // We should travel up the tree and make sure parent are also displayed:
            ShowHideObject_WillProbablyWork(oParent, true, true);
        }
    } // else: if (!bDisplay) ...
    //
} // ShowHideObject_WillProbablyWork(...)
//
// ... and finally:
function ShowHideId_WillProbablyWork(id, bDisplay, bMaybeRecursive)
    var o = document.getElementById(id);
    ShowHideObject_WillProbablyWork(o, bDisplay, bMaybeRecursive)
} // ShowHideId_WillProbablyWork(...)

Of course this could be shortened a bit; but that's how it looks in my source.

Upvotes: 2

antyrat
antyrat

Reputation: 27765

You need just assign it to empty value:

document.getElementById(id).style.display = "";

Or using removeProperty method:

document.getElementById(id).style.removeProperty( 'display' );

But note that removeProperty will not work on IE<9.

If you want to get original CSS value you will need probably to get it from empty <iframe> element. I created example on jsFiddle how to get current value using getComputedStyle and iframe value on jsFiddle.

Please note that getComputedStyle not support old versions of IE. It support IE9+.

For IE8 you should use Element.currentStyle

Upvotes: 43

Navarr
Navarr

Reputation: 3764

Since what you want is the default value for the element and not what's in the style sheet, you simply want to set the value to auto. 

document.getElementById(id).style.display="auto"

This tells the browser to calculate what the normal display for this type of element is and to use that.

Upvotes: -1

maksion
maksion

Reputation: 143

Filling in an empty value removes the inline override, so the original value is active again.

function show(id){
    document.getElementById(id).style.display = "";
}

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You can use custom attributes

function hide(id){
    var elem = document.getElementById(id);
    //Store prev value
    elem.setAttribute('custom-attr', elem.style.display);
    elem.style.display = "none";
}

function show(id){
    var elem = document.getElementById(id);
    //Set prev value
    elem.style.display = elem.getAttribute('custom-attr');
}

Upvotes: 0

Related Questions