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

【问题标题】：What does this empty string mean?这个空字符串是什么意思？
【发布时间】：2011-12-06 14:52:30
【问题描述】：

<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）。在这种情况下是什么意思？

【问题讨论】：

为什么你有这么多newlines分隔你的代码的每一行？

标签： javascript dom stylesheet cssom

【解决方案1】：

它所做的只是清除了那个 CSS 属性。如果 style 属性以前是这样的：

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

它现在看起来像这样：

<div style=""></div>

【讨论】：

那么，会使用默认值吗？？
您混淆了属性和属性。属性可能存在也可能不存在，并且可能与属性具有相同的值，也可能不同。
将使用默认值或通过 CSS 继承的任何属性。这取决于是否有任何 CSS 规则适用于元素。 @RobG，样式属性直接对应于Firefox中样式属性本身的结果，看起来IE没有更新样式标签。
@SoWeLie - 属性和属性（样式或其他）不等价，请查看我的答案并在多个浏览器中进行测试。
@RobG，是的，它们不是一回事……显然。样式属性是 DOM 的一部分，而样式属性是标记的一部分。然而，它们产生的结果是相同的。在 Firefox 和 Google Chrome（我假设其他基于 Webkit 的浏览器）中，设置样式属性确实会更新样式属性。在 IE 中，它不会导致 style 属性的更新。

【解决方案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： 背景色：红色；边框：1px 纯蓝色；

IE 8： [对象]

Chrome 14： 背景色：红色；边框顶部宽度：1px；右边框宽度：1px；边框底部宽度：1px；左边框宽度：1px；边框顶部样式：实心；右边框样式：实心；边框底部样式：实心；左边框样式：实心；边框顶部颜色：蓝色；右边框颜色：蓝色；边框底色：蓝色；左边框颜色：蓝色；

Opera 11： 背景色：#ff0000；边框顶部颜色：#0000ff；左边框颜色：#0000ff；右边框颜色：#0000ff；边框底部颜色：#0000ff；边框顶部宽度：1px；左边框宽度：1px；右边框宽度：1px；边框底部宽度：1px；边框顶部样式：实心；左边框样式：实心；右边框样式：实心；边框底部样式：实心

【讨论】：

【解决方案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>

【讨论】：