Question

<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>

有一个空字符串分配给height和display CSS属性（通过CSSOM）。在这种情况下它意味着什么？

Answer 1

所有这一切只是消除了CSS属性。如果style属性在此之前显示如下：

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

现在看起来像这样：

<div style=""></div>

Answer 2

将element.style属性设置为''（空字符串）允许它们采用继承或默认值。

例如，将element.style.display设置为空字符串是显示先前使用display = 'none';隐藏的元素的首选方式，这样您就不必知道原始属性是什么（它可能根本没有设置。）

请注意，在某些浏览器中，更改DOM属性会修改相关的HTML属性，但在其他浏览器中则不会。此外，如何设置属性，它取决于实现。所以不要依赖那种行为，只需处理属性。

在几个浏览器中尝试以下操作：

<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;边框：1px纯蓝色;

IE 8： [对象]

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

Answer 3

这个例子应该有所帮助：

<!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>

这个空字符串是什么意思？

3 个答案: