Существуют ли правила CSS, которые при установке на пустые строки переопределяют правила с более низкой специфичностью

Question

Я пытаюсь определить, какой стиль применяется к элементу, учитывая как встроенные, так и классовые стили. Javascript анализирует оба этих объекта в объекты, но стили, которые не установлены, являются пустыми строками, а не undefined, Если стили, которые являются "пустыми" (например, width:;) не имеют никакого эффекта, независимо от того, насколько конкретно правило, тогда моя цель тривиальна.

Однако для того, чтобы переопределить display:none с правилом по умолчанию динамически, я знаю, что document.getElementById('ele').style.display = ''; работает и, хотя я знаю, что на самом деле не добавляет display встроенный стиль, есть ли какие-либо стили, которые имеют эффект, когда они установлены пустыми в CSS? Если это так, мне нужно было бы вручную проанализировать строки стиля и таблицы стилей, чтобы увидеть, было ли определено свойство.

Answer 1

Пишу display:; или же display:''; внутри таблицы стилей или блока объявления стилей есть недопустимое объявление.

style Свойство элемента - это отдельная история. Это удобный механизм для установки и получения встроенных стилей элемента. Установка значения на самом деле является сокращением для .setProperty и получить стенографию для .getPropertyValue,

<div></div>

=>
element.style.display == ''
element.getPropertyValue('display') == null

Поскольку встроенный стиль не установлен, значение для display, так getPropertyValue('display') возвращается null,

Теперь, когда мы знаем, что.display коротка для .getPropertyValue('display') давайте посмотрим, что спецификация говорит о возвращаемом значении:

Возвращает значение свойства, если оно было явно установлено для этого блока объявления. Возвращает пустую строку, если свойство не было установлено

Таким образом, пустая строка не имеет значения.

element.style.display = 'none'

=>
<div style="display: none;"></div>
element.getPropertyValue('display') == 'none'

Как видите, мы можем легко установить встроенный стиль, используя .style, Если мы сейчас попытаемся установить недопустимое значение, оно будет проигнорировано:

element.style.display = 'foo'

=>
<div style="display: none;"></div>
element.getPropertyValue('display') == 'none'

Ничего не меняется Установка значения в пустую строку работает, хотя, это эквивалентно отсутствию стиля:

element.style.display = ''

=>
<div></div>
element.getPropertyValue('display') == null 

настройка display в null будет работать тоже.