1 
<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和displayCSS 属性（通过 CSSOM）。在这种情况下是什么意思？

4

3 回答 3

2

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

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

它现在看起来像这样：

<div style=""></div>
于 2011-10-13T02:29:22.903 回答
1

将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；边框顶部样式：实心；左边框样式：实心；右边框样式：实心；边框底部样式：实心

于 2011-10-13T02:39:01.690 回答
0

这个例子应该有帮助：

<!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>
于 2011-10-13T02:52:39.030 回答