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

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

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

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

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

Является ли это "reset" исходным свойством отображения?

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

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

Было бы хорошо знать: Кто-нибудь знает какие-либо ссылки на какие-либо документы об этом?

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

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

Ответ 1

Да, он сбрасывает свойство отображения элемента по умолчанию, гаснув встроенный "display: none", в результате чего элемент возвращается к свойству отображения, как определено правилами 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":""});

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

<div style=""></div>

Поскольку стиль inline больше не указывает 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/ (не в статье, а в разделе комментариев)

Ответ 2

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

Ответ 3

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

Это не reset исходное свойство отображения.

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

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

И сделайте следующее:

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

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

Ответ 4

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