Сброс свойства отображения CSS до значения по умолчанию

Можно ли переопределить свойство display его значением по умолчанию? Например, если я установил его на none в одном стиле, и я хочу переопределить его в другом по умолчанию.

Или это единственный способ выяснить, что по умолчанию для этого элемента, а затем установить его на это? Хотелось бы не знать, является ли элемент обычно блочным, встроенным или каким бы то ни было...

Источник

8 ответов

Решение

Стили браузера по умолчанию определены в его таблице стилей агента пользователя, источники которой вы можете найти здесь. К сожалению, спецификация уровня 3 " Каскадирование и наследование", по- видимому, не предлагает способ сброса свойства стиля до значения по умолчанию в браузере. Тем не менее, есть планы повторно ввести ключевое слово для этого на уровне 4 каскадирования и наследования - рабочая группа просто еще не определилась с именем для этого ключевого слова (в настоящее время ссылка говорит revert, но это не окончательно).

В то время как спецификация уровня 3 вводит initial ключевое слово, устанавливая свойство в его начальное значение, сбрасывает его в значение по умолчанию, как определено CSS, а не как определено браузером. Начальная стоимость display является inline; это указано здесь. initial Ключевое слово относится к этому значению, а не к браузеру по умолчанию. Сама спецификация делает это примечание под all свойство:

Например, если автор указывает all: initial для элемента он блокирует все наследование и сбрасывает все свойства, как если бы на уровне автора, пользователя или агента пользователя не существовало никаких правил каскада.

Это может быть полезно для корневого элемента "виджета", включенного в страницу, который не хочет наследовать стили внешней страницы. Однако обратите внимание, что к этому элементу применяется любой стиль "по умолчанию" (например, например, display: block из таблицы стилей UA на блочные элементы, такие как <div>) также сдулся.

Поэтому я думаю, что единственный способ использовать чистый CSS прямо сейчас - это найти значение по умолчанию в браузере и установить его вручную:

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(Альтернативой вышесказанному будет div.foo:not(.bar) { display: inline-block; }, но это включает в себя изменение исходного селектора, а не переопределение.)

Источник

Если использование JavaScript разрешено, вы можете установить display свойство пустой строки. Это заставит его использовать значение по умолчанию для этого конкретного элемента.

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

Вот ссылка на jsbin.

Это хорошо, потому что вам не нужно беспокоиться о различных типах отображения, чтобы вернуться к (block, inline, inline-block, table-cell, так далее).

Но для этого требуется javascript, поэтому, если вы ищете решение только для css, то это не решение для вас.

Примечание: это переопределяет встроенные стили, но не стили, установленные в CSS

Источник

Отозвать display:

Вы можете использовать значение unset который работает как в Firefox, так и в Chrome.

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }
Источник

Что сработало для меня, так это revert!

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

Источник

Нет, это вообще невозможно. Как только некоторый код CSS (или HTML) устанавливает значение для свойства элемента, невозможно отменить его и сказать браузеру использовать его значение по умолчанию.

Конечно, можно установить для свойства значение, которое вы ожидаете использовать в качестве значения по умолчанию. Это может работать довольно широко, если вы проверите раздел " Рендеринг " в HTML5 CR, в основном отражая то, что на самом деле делают браузеры.

Тем не менее, ответ "Нет", потому что браузеры могут иметь любые значения по умолчанию, которые им нравятся. Вы должны проанализировать причину, по которой вы хотите сбросить настройки по умолчанию; исходная проблема все еще может быть решена.

Источник

Если у вас есть доступ к JavaScript, вы можете создать элемент и прочитать его вычисленный стиль.

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'
Источник

Что касается ответа от BoltClock и Джона, у меня лично были проблемы с исходным ключевым словом при использовании IE11. Он отлично работает в Chrome, но в IE, похоже, не имеет никакого эффекта.

Согласно этому ответу IE не поддерживает начальное ключевое слово: Div display: начальное не работает, как задумано в ie10 и chrome 29

Я попытался установить его пустым вместо этого, как предложено здесь: как вернуться к нормальному состоянию после отображения: нет для строки таблицы

Это сработало и было достаточно для моего сценария. Конечно, чтобы установить реальное начальное значение, приведенный выше ответ является единственным хорошим, который я смог найти.

Источник

Согласно моему пониманию вашего вопроса, в качестве примера: у вас был стиль в начале в таблице стилей (например, background-color: red), затем с помощью java-скрипта вы изменили его на другой стиль (например, background-color: green), теперь вы хотите восстановить исходное значение стиля в таблице стилей (background-color: red), не упоминая и даже не зная его значения (например, element.style.backgroundColor = 'red')...!

Если я прав, у меня есть хорошее решение для вас, которое использует другое имя класса для элемента:

шаги:

  1. установить стили по умолчанию в таблице стилей как обычно по своему желанию.
  2. определите имя нового класса в таблице стилей и добавьте новый стиль, который вам нужен.
  3. если вы хотите переключаться между стилями, добавьте к элементу новое имя класса или удалите его.

если вы хотите отредактировать или установить новый стиль, получите элемент по новому имени класса и отредактируйте стиль по своему усмотрению.

Надеюсь, это поможет. С уважением!

Источник
Другие вопросы по тегам