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; ボーダートップスタイル: ソリッド; border-right-style: solid; ボーダーボトムスタイル: ソリッド; border-left-style: solid; ボーダートップカラー: 青; ボーダー右の色: 青; ボーダーボトムカラー: ブルー; ボーダー左の色: 青;

Opera 11:背景色: #ff0000; ボーダートップカラー: #0000ff; ボーダー左の色: #0000ff; ボーダー右の色: #0000ff; ボーダーボトムカラー: #0000ff; ボーダートップ幅: 1px; ボーダー左幅: 1px; ボーダー右幅: 1px; ボーダー底幅: 1px; ボーダートップスタイル: ソリッド; border-left-style: solid; border-right-style: solid; border-bottom-style: ソリッド

于 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 に答える