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

发布于 2024-12-09 11:01:43 字数 1976 浏览 0 评论 0原文

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ペ泪落弦音 2024-12-16 11:01:44

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

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

回复收藏 0 原文

霓裳挽歌倾城醉 2024-12-16 11:01:44

这个例子应该有帮助：

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

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>

回复收藏 0 原文