Что на самом деле делает style.display = ''?

Question

После изучения этой проблемы в течение нескольких часов я обнаружил, что один из наиболее эффективных способов переключения отображения элемента страницы (в HTML) - выполнить что-то вроде:

// showing
document.getElementById('element').style.display = '';

// hiding
document.getElementById('element').style.display = 'none';

Простой вопрос: Что на самом деле делает style.display = ''

Сбрасывает ли оно исходное свойство экрана?

Или оно удаляет свойство display, тем самым используя стиль отображения по умолчанию?

..........................................

Было бы неплохо знать: Кто-нибудь знает какие-либо ссылки на какую-либо документацию по этому поводу?

(Да, у меня есть Google-d, эта проблема, но я, вероятно, неправильно ввожу поисковый запрос и продолжаю искать совершенно не связанные результаты поиска.)

Спасибо за любые предложения или ссылки.

Answer 1

Да, он сбрасывает свойство display элемента к значению по умолчанию, удаляя встроенный "display: none", в результате чего элемент возвращается к свойству display, как определено правилами CSS ранжирования страницы.

Например, вот <div> с идентификатором «myElement».

<div id="myElement"></div>

A <div> имеет значение по умолчанию display:block. В нашей таблице стилей предположим, что мы указываем, что ваш <div> должен отображаться как table:

div#myElement
{
    display:table;
}

После загрузки вашей страницы, <div> отображается как table. Если вы хотите скрыть это <div> с помощью сценариев, вы можете сделать следующее:

// JavaScript:
document.getElementById("myElement").style.display = 'none';

// jQuery:
$("#myElement").toggle(); // if currently visible
$("#myElement").hide();
$("#myElement").css({"display":"none"});

Все это имеет одинаковый эффект: добавление встроенного свойства style к вашему <div>:

<div id="myElement" style="display:none"></div>

Если вы хотите снова показать элемент, сработает любой из них:

// JavaScript:
document.getElementById("myElement").style.display = "";

// jQuery:
$("#myElement").toggle(); // if currently hidden
$("#myElement").show();
$("#myElement").css({"display":""});

Они удаляют CSS-свойство display из встроенного style свойства:

<div style=""></div>

Поскольку встроенный стиль больше не определяет display, <div> возвращается к отображению как table, поскольку это то, что мы поместили в таблицу стилей. <div> не не возвращается к отображению как block, потому что наш CSS переопределяет эту настройку по умолчанию; отключение встроенного свойства display не отменяет правил в наших таблицах стилей.

---

Для хихиканья, вот запрос Google, который я использовал для проверки моего ответа: javascript style display empty string default

... и несколько ссылок, где это упоминается:

http://jszen.blogspot.com/2004/07/table-rowsrevealed.html

http://www.harrymaugans.com/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/ (не в статье, а в разделе комментариев)

Answer 2

Устанавливает стиль display в значение по умолчанию для этого элемента. Для большинства элементов, если не для всех, значением по умолчанию является нечто иное, чем none.

Answer 3

Удаляет значение для свойства display, так что используется значение по умолчанию.

Это не сбрасывает исходное свойство display.

Если вы, например,иметь это:

<span id="test" style="display:block;">b</span>

И сделать это:

document.getElementById('test').style.display = 'inline';
document.getElementById('test').style.display = '';

стиль display, используемый для элемента, заканчивается как inline, потому что это элемент по умолчанию, этоне сбрасывается обратно в стиль, указанный в коде HTML.

Answer 4

Устанавливает css для отображения этого элемента равным null, что по существу стирает то, что было установлено, и возвращается к значению по умолчанию.