What does this empty string mean?

Question

What does this empty string mean?

1.6k views Asked by DrStrangeLove At 20 September 2024 at 22:29

<script type="text/javascript">

        var step = 4;

        function expandPanel()

        {

            var panel = document.getElementById('panel');

            if ( panel.clientHeight < (panel.originalHeight-step))

            {

                //clientWidth

                var h = panel.clientHeight + step;

                panel.style.height = h+"px";

                setTimeout("expandPanel()", 100); 

            }

            else

            {

                panel.style.height = "";

                var panelTitle = document.getElementById('panelTitle');

                panelTitle.firstChild.nodeValue = 'Collapse';



            }

        }



        function collapsePanel()

        {

            var panel = document.getElementById('panel');



            if ( panel.clientHeight >= step)

            {

                var h = panel.clientHeight - step;

                panel.style.height = h+"px";

                setTimeout("collapsePanel()", 100);

            }

            else

            {

                panel.style.display = 'none';

                var panelTitle = document.getElementById('panelTitle');

                panelTitle.firstChild.nodeValue = 'Expand';

            }





        }



        function changePanel()

        {

            var panel = document.getElementById('panel');

            if (!panel.style.height || 

                (panel.style.display == 'none'))

            {

                if (panel.style.display == 'none')

                {

                    panel.style.display = '';

                    expandPanel();

                }

                else

                {

                    panel.originalHeight = panel.clientHeight;

                    collapsePanel();

                }

            }

        }

    </script>

There is an empty string assigned to the height and display CSS properties (via CSSOM). What does it mean in this case?

Original Q&A

There are 3 answers

RobG On 13 October 2011 at 02:39

Setting element.style properties to '' (empty string) lets them adopt the inherited or default value.

For example, setting element.style.display to empty string it is the preferred way to show an element that was previously hidden with display = 'none';, that way you don't have to know what the original property was (it may not have been set at all).

Please note that in some browsers, changing a DOM property will modify the related HTML attribute but in other browsers it won't. Also, how the attribute is set it is implementation dependent. So do not rely on that behaviour, just deal with properties.

Try the following in a few browsers:

<div id="d0">div</div>
<button onclick="
  var el = document.getElementById('d0');
  el.style.backgroundColor = 'red';
  el.style.border = '1px solid blue';
  alert(el.getAttribute('style'));
">Do stuff</button>

Firefox 5: background-color: red; border: 1px solid blue;

IE 8: [object]

Chrome 14: background-color: red; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: blue; border-right-color: blue; border-bottom-color: blue; border-left-color: blue;

Opera 11: background-color: #ff0000; border-top-color: #0000ff; border-left-color: #0000ff; border-right-color: #0000ff; border-bottom-color: #0000ff; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-left-style: solid; border-right-style: solid; border-bottom-style: solid

Shadow2531 On 13 October 2011 at 02:52

This example should help:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                height: 45px;
                width: 45px;
                border: 1px solid #000;
                background-color: #ccc
            }
        </style>
        <script>
            window.addEventListener("DOMContentLoaded", function() {
                var div = document.getElementsByTagName("div")[0];
                alert("That's the default size. Let's change it.");
                div.style.height = "200px";
                div.style.width = "200px";
                alert("Let's reset the size back to default.");
                div.style.height = "";
                div.style.width = "";
            }, false);
        </script>
    </head>
    <body>
        <div></div>
    </body>
</html>

**SoWeLie** · Accepted Answer · 2011-10-13 02:29:22

All it does is just wipes out that CSS property. If the style attribute looked like this before:

<div style="height: 100px"></div>

It will now look like this:

<div style=""></div>

TechQA.

What does this empty string mean?

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in DOM

Related Questions in STYLESHEET

Related Questions in CSSOM

Popular Questions

Popular Tags

Trending Questions