Что означает эта пустая строка? - PullRequest
Новая
       27

Что означает эта пустая строка?

1 голос
/ 13 октября 2011 
<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>

Существует пустая строка, назначенная свойствам CSS height и display (через CSSOM). Что это значит в этом случае?

Ответы [ 3 ]

2 голосов
/ 13 октября 2011

Все, что он делает, это просто стирает это свойство CSS.Если атрибут style выглядел так раньше: 

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

Теперь он будет выглядеть так: 

<div style=""></div>
1 голос
/ 13 октября 2011

Установка 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: Цвет фона: красный; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; стиль верхней границы: сплошной; стиль границы справа: сплошной; стиль границы снизу: сплошной; стиль рамки слева: сплошной; верхний цвет: синий; рамка-цвет справа: синий; цвет рамки снизу: синий; Цвет рамки слева: синий;

Opera 11: background-color: # ff0000; пограничный верхний цвет: # 0000ff; Цвет рамки слева: # 0000ff; цвет границы справа: # 0000ff; Цвет границы нижний: # 0000ff; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; стиль верхней границы: сплошной; стиль рамки слева: сплошной; стиль границы справа: сплошной; стиль границы снизу: сплошной

0 голосов
/ 13 октября 2011

Этот пример должен помочь: 

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